yet-another-react-lightbox - npm Package Compare versions

Comparing version 3.12.2 to 3.12.3

dist/index.d.ts

 import * as React from 'react';
-import { LightboxExternalProps, LightboxProps, Labels, Slide, SlideImage, LengthOrPercentage, ContainerRect, ToolbarSettings, Component, Module, Node, Plugin, Augmentation, EventTypes, ComponentProps, LightboxStateSwipeAction, LightboxStateUpdateAction, LightboxState, CarouselSettings, Render, ControllerRef, Callback, RenderFunction } from './types.js';
+import { LightboxExternalProps, LightboxProps, Labels, Slide, SlideImage, LengthOrPercentage, ContainerRect, ToolbarSettings, CarouselSettings, Component, Module, Node, Plugin, Augmentation, EventTypes, ComponentProps, LightboxStateSwipeAction, LightboxStateUpdateAction, LightboxState, Render, ControllerRef, Callback, RenderFunction } from './types.js';
 export { ACTION_CLOSE, ACTION_NEXT, ACTION_PREV, ACTION_SWIPE, ACTIVE_SLIDE_COMPLETE, ACTIVE_SLIDE_ERROR, ACTIVE_SLIDE_LOADING, ACTIVE_SLIDE_PLAYING, AnimationSettings, CLASS_FLEX_CENTER, CLASS_FULLSIZE, CLASS_NO_SCROLL, CLASS_NO_SCROLL_PADDING, Callbacks, ClickCallbackProps, ControllerSettings, DeepPartial, DeepPartialValue, ELEMENT_BUTTON, ELEMENT_ICON, EVENT_ON_KEY_DOWN, EVENT_ON_KEY_UP, EVENT_ON_POINTER_CANCEL, EVENT_ON_POINTER_DOWN, EVENT_ON_POINTER_LEAVE, EVENT_ON_POINTER_MOVE, EVENT_ON_POINTER_UP, EVENT_ON_WHEEL, GenericSlide, IMAGE_FIT_CONTAIN, IMAGE_FIT_COVER, ImageFit, ImageSource, MODULE_CAROUSEL, MODULE_CONTROLLER, MODULE_NAVIGATION, MODULE_NO_SCROLL, MODULE_PORTAL, MODULE_ROOT, MODULE_TOOLBAR, NavigationAction, PLUGIN_CAPTIONS, PLUGIN_COUNTER, PLUGIN_DOWNLOAD, PLUGIN_FULLSCREEN, PLUGIN_INLINE, PLUGIN_SHARE, PLUGIN_SLIDESHOW, PLUGIN_THUMBNAILS, PLUGIN_ZOOM, PluginProps, PortalSettings, RenderSlideContainerProps, RenderSlideFooterProps, RenderSlideHeaderProps, RenderSlideProps, SLIDE_STATUS_COMPLETE, SLIDE_STATUS_ERROR, SLIDE_STATUS_LOADING, SLIDE_STATUS_PLACEHOLDER, SLIDE_STATUS_PLAYING, SlideStatus, SlideTypeKey, SlideTypes, Slot, SlotStyles, SlotType, ToolbarButtonKey, ToolbarButtonKeys, UNKNOWN_ACTION_TYPE, VK_ARROW_LEFT, VK_ARROW_RIGHT, VK_ESCAPE, ViewCallbackProps, activeSlideStatus } from './types.js';
@@ -44,2 +44,3 @@
 };
+declare function calculatePreload(carousel: CarouselSettings, slides: Slide[], minimum?: number): number;
 
@@ -256,2 +257,2 @@ declare function createModule(name: string, component: Component): Module;
 
-export { Augmentation, Callback, Carousel, CarouselModule, CarouselSettings, CloseIcon, Component, ComponentProps, ComputeAnimation, ContainerRect, Controller, ControllerContext, ControllerContextType, ControllerModule, ControllerRef, ErrorIcon, Event, EventCallback, EventTypes, EventsContext, EventsContextType, EventsProvider, IconButton, IconButtonProps, ImageSlide, ImageSlideProps, KeyboardEventType, Labels, LengthOrPercentage, Lightbox, LightboxDefaultProps, LightboxDispatchContext, LightboxDispatchContextType, LightboxExternalProps, LightboxProps, LightboxPropsContext, LightboxPropsContextType, LightboxPropsProvider, LightboxState, LightboxStateAction, LightboxStateContext, LightboxStateContextType, LightboxStateProvider, LightboxStateProviderProps, LightboxStateSwipeAction, LightboxStateUpdateAction, LoadingIcon, Module, Navigation, NavigationButton, NavigationButtonProps, NavigationModule, NextIcon, NoScroll, NoScrollModule, Node, Plugin, PointerEventType, Portal, PortalModule, PreviousIcon, Publish, ReactEventType, RegisterSensors, Render, RenderFunction, Root, RootModule, SensorCallback, Slide, SlideImage, Subscribe, SubscribeSensors, SupportedEventType, SwipeState, TimeoutsContext, TimeoutsContextType, TimeoutsProvider, Toolbar, ToolbarModule, ToolbarSettings, Topic, Unsubscribe, UseSensors, WheelEventType, addToolbarButton, cleanup, clsx, composePrefix, computeSlideRect, createIcon, createIconDisabled, createModule, createNode, cssClass, cssVar, Lightbox as default, devicePixelRatio, getSlide, getSlideIfPresent, getSlideIndex, hasSlides, hasWindow, isImageFitCover, isImageSlide, label, makeComposePrefix, makeUseContext, parseLengthPercentage, round, setRef, stopNavigationEventsPropagation, useAnimation, useContainerRect, useController, useDelay, useEventCallback, useEvents, useForkRef, useLayoutEffect, useLightboxDispatch, useLightboxProps, useLightboxState, useLoseFocus, useMotionPreference, usePointerSwipe, usePreventSwipeNavigation, useRTL, useSensors, useThrottle, useTimeouts, useWheelSwipe, withPlugins };
+export { Augmentation, Callback, Carousel, CarouselModule, CarouselSettings, CloseIcon, Component, ComponentProps, type ComputeAnimation, ContainerRect, Controller, ControllerContext, type ControllerContextType, ControllerModule, ControllerRef, ErrorIcon, type Event, type EventCallback, EventTypes, EventsContext, type EventsContextType, EventsProvider, IconButton, type IconButtonProps, ImageSlide, type ImageSlideProps, type KeyboardEventType, Labels, LengthOrPercentage, Lightbox, LightboxDefaultProps, LightboxDispatchContext, type LightboxDispatchContextType, LightboxExternalProps, LightboxProps, LightboxPropsContext, type LightboxPropsContextType, LightboxPropsProvider, LightboxState, type LightboxStateAction, LightboxStateContext, type LightboxStateContextType, LightboxStateProvider, type LightboxStateProviderProps, LightboxStateSwipeAction, LightboxStateUpdateAction, LoadingIcon, Module, Navigation, NavigationButton, type NavigationButtonProps, NavigationModule, NextIcon, NoScroll, NoScrollModule, Node, Plugin, type PointerEventType, Portal, PortalModule, PreviousIcon, type Publish, type ReactEventType, type RegisterSensors, Render, RenderFunction, Root, RootModule, type SensorCallback, Slide, SlideImage, type Subscribe, type SubscribeSensors, type SupportedEventType, SwipeState, TimeoutsContext, type TimeoutsContextType, TimeoutsProvider, Toolbar, ToolbarModule, ToolbarSettings, type Topic, type Unsubscribe, type UseSensors, type WheelEventType, addToolbarButton, calculatePreload, cleanup, clsx, composePrefix, computeSlideRect, createIcon, createIconDisabled, createModule, createNode, cssClass, cssVar, Lightbox as default, devicePixelRatio, getSlide, getSlideIfPresent, getSlideIndex, hasSlides, hasWindow, isImageFitCover, isImageSlide, label, makeComposePrefix, makeUseContext, parseLengthPercentage, round, setRef, stopNavigationEventsPropagation, useAnimation, useContainerRect, useController, useDelay, useEventCallback, useEvents, useForkRef, useLayoutEffect, useLightboxDispatch, useLightboxProps, useLightboxState, useLoseFocus, useMotionPreference, usePointerSwipe, usePreventSwipeNavigation, useRTL, useSensors, useThrottle, useTimeouts, useWheelSwipe, withPlugins };

dist/plugins/thumbnails/index.js

@@ -1,2 +0,2 @@
-import { useLightboxProps, composePrefix, createIcon, cssClass, isImageSlide, clsx, ImageSlide, makeComposePrefix, cssVar, useLightboxState, useEvents, useRTL, useAnimation, useEventCallback, cleanup, hasSlides, getSlide, makeUseContext, LightboxPropsProvider, createIconDisabled, IconButton, addToolbarButton, createModule } from '../../index.js';
+import { useLightboxProps, composePrefix, createIcon, cssClass, isImageSlide, clsx, ImageSlide, makeComposePrefix, cssVar, useLightboxState, useEvents, useRTL, useAnimation, useEventCallback, cleanup, calculatePreload, hasSlides, getSlide, makeUseContext, LightboxPropsProvider, createIconDisabled, IconButton, addToolbarButton, createModule } from '../../index.js';
 import * as React from 'react';
@@ -123,4 +123,3 @@ import { PLUGIN_THUMBNAILS, ELEMENT_ICON, CLASS_FULLSIZE, CLASS_FLEX_CENTER, ACTION_SWIPE, ACTION_NEXT, ACTION_PREV, PLUGIN_FULLSCREEN, MODULE_CONTROLLER } from '../../types.js';
     React.useEffect(() => cleanup(subscribe(ACTION_SWIPE, handleControllerSwipe)), [subscribe, handleControllerSwipe]);
-    const { finite } = carousel;
-    const preload = Math.min(carousel.preload, Math.floor(slides.length / 2));
+    const preload = calculatePreload(carousel, slides);
     const items = [];
@@ -134,3 +133,3 @@ if (hasSlides(slides)) {
         for (let i = index - preload - Math.max(offset, 0); i < index; i += 1) {
-            if (!(finite && i < 0)) {
+            if (!(carousel.finite && i < 0)) {
                 items.push({ slide: getSlide(slides, i), index: i });
@@ -144,3 +143,3 @@ }
         for (let i = index + 1; i <= index + preload - Math.min(offset, 0); i += 1) {
-            if (!finite || i <= slides.length - 1) {
+            if (!carousel.finite || i <= slides.length - 1) {
                 items.push({ slide: getSlide(slides, i), index: i });
@@ -147,0 +146,0 @@ }

dist/types.d.ts

@@ -417,2 +417,2 @@ import * as React from 'react';
 
-export { ACTION_CLOSE, ACTION_NEXT, ACTION_PREV, ACTION_SWIPE, ACTIVE_SLIDE_COMPLETE, ACTIVE_SLIDE_ERROR, ACTIVE_SLIDE_LOADING, ACTIVE_SLIDE_PLAYING, AnimationSettings, Augmentation, CLASS_FLEX_CENTER, CLASS_FULLSIZE, CLASS_NO_SCROLL, CLASS_NO_SCROLL_PADDING, Callback, Callbacks, CarouselSettings, ClickCallbackProps, Component, ComponentProps, ContainerRect, ControllerRef, ControllerSettings, DeepPartial, DeepPartialValue, ELEMENT_BUTTON, ELEMENT_ICON, EVENT_ON_KEY_DOWN, EVENT_ON_KEY_UP, EVENT_ON_POINTER_CANCEL, EVENT_ON_POINTER_DOWN, EVENT_ON_POINTER_LEAVE, EVENT_ON_POINTER_MOVE, EVENT_ON_POINTER_UP, EVENT_ON_WHEEL, EventTypes, GenericSlide, IMAGE_FIT_CONTAIN, IMAGE_FIT_COVER, ImageFit, ImageSource, Labels, LengthOrPercentage, LightboxExternalProps, LightboxProps, LightboxState, LightboxStateSwipeAction, LightboxStateUpdateAction, MODULE_CAROUSEL, MODULE_CONTROLLER, MODULE_NAVIGATION, MODULE_NO_SCROLL, MODULE_PORTAL, MODULE_ROOT, MODULE_TOOLBAR, Module, NavigationAction, Node, PLUGIN_CAPTIONS, PLUGIN_COUNTER, PLUGIN_DOWNLOAD, PLUGIN_FULLSCREEN, PLUGIN_INLINE, PLUGIN_SHARE, PLUGIN_SLIDESHOW, PLUGIN_THUMBNAILS, PLUGIN_ZOOM, Plugin, PluginProps, PortalSettings, Render, RenderFunction, RenderSlideContainerProps, RenderSlideFooterProps, RenderSlideHeaderProps, RenderSlideProps, SLIDE_STATUS_COMPLETE, SLIDE_STATUS_ERROR, SLIDE_STATUS_LOADING, SLIDE_STATUS_PLACEHOLDER, SLIDE_STATUS_PLAYING, Slide, SlideImage, SlideStatus, SlideTypeKey, SlideTypes, Slot, SlotStyles, SlotType, ToolbarButtonKey, ToolbarButtonKeys, ToolbarSettings, UNKNOWN_ACTION_TYPE, VK_ARROW_LEFT, VK_ARROW_RIGHT, VK_ESCAPE, ViewCallbackProps, activeSlideStatus };
+export { ACTION_CLOSE, ACTION_NEXT, ACTION_PREV, ACTION_SWIPE, ACTIVE_SLIDE_COMPLETE, ACTIVE_SLIDE_ERROR, ACTIVE_SLIDE_LOADING, ACTIVE_SLIDE_PLAYING, type AnimationSettings, type Augmentation, CLASS_FLEX_CENTER, CLASS_FULLSIZE, CLASS_NO_SCROLL, CLASS_NO_SCROLL_PADDING, type Callback, type Callbacks, type CarouselSettings, type ClickCallbackProps, type Component, type ComponentProps, type ContainerRect, type ControllerRef, type ControllerSettings, type DeepPartial, type DeepPartialValue, ELEMENT_BUTTON, ELEMENT_ICON, EVENT_ON_KEY_DOWN, EVENT_ON_KEY_UP, EVENT_ON_POINTER_CANCEL, EVENT_ON_POINTER_DOWN, EVENT_ON_POINTER_LEAVE, EVENT_ON_POINTER_MOVE, EVENT_ON_POINTER_UP, EVENT_ON_WHEEL, type EventTypes, type GenericSlide, IMAGE_FIT_CONTAIN, IMAGE_FIT_COVER, type ImageFit, type ImageSource, type Labels, type LengthOrPercentage, type LightboxExternalProps, type LightboxProps, type LightboxState, type LightboxStateSwipeAction, type LightboxStateUpdateAction, MODULE_CAROUSEL, MODULE_CONTROLLER, MODULE_NAVIGATION, MODULE_NO_SCROLL, MODULE_PORTAL, MODULE_ROOT, MODULE_TOOLBAR, type Module, type NavigationAction, type Node, PLUGIN_CAPTIONS, PLUGIN_COUNTER, PLUGIN_DOWNLOAD, PLUGIN_FULLSCREEN, PLUGIN_INLINE, PLUGIN_SHARE, PLUGIN_SLIDESHOW, PLUGIN_THUMBNAILS, PLUGIN_ZOOM, type Plugin, type PluginProps, type PortalSettings, type Render, type RenderFunction, type RenderSlideContainerProps, type RenderSlideFooterProps, type RenderSlideHeaderProps, type RenderSlideProps, SLIDE_STATUS_COMPLETE, SLIDE_STATUS_ERROR, SLIDE_STATUS_LOADING, SLIDE_STATUS_PLACEHOLDER, SLIDE_STATUS_PLAYING, type Slide, type SlideImage, type SlideStatus, type SlideTypeKey, type SlideTypes, type Slot, type SlotStyles, type SlotType, type ToolbarButtonKey, type ToolbarButtonKeys, type ToolbarSettings, UNKNOWN_ACTION_TYPE, VK_ARROW_LEFT, VK_ARROW_RIGHT, VK_ESCAPE, type ViewCallbackProps, activeSlideStatus };

package.json

 {
     "name": "yet-another-react-lightbox",
-    "version": "3.12.2",
+    "version": "3.12.3",
     "description": "Modern React lightbox component",
@@ -5,0 +5,0 @@ "author": "Igor Danchenko",

README.md

 # Yet Another React Lightbox
 
-Modern React lightbox component. Performant, easy to use, customizable and extendable.
+Modern React lightbox component. Performant, easy to use, customizable and
+extendable.
 
@@ -11,13 +12,16 @@ ## Overview
 
--   **Built for React:** works with React 18, 17 and 16.8.0+
--   **UX:** supports keyboard, mouse, touchpad and touchscreen navigation
--   **Preloading:** never displays partially downloaded images
--   **Performance:** preloads limited number of images without compromising performance or UX
--   **Responsive:** responsive images with automatic resolution switching are supported out of the box
--   **Video:** video slides are supported via an optional plugin
--   **Zoom:** image zoom is supported via an optional plugin
--   **Customization:** customize any UI element or add your own custom slides
--   **No bloat:** never bundle rarely used features; add optional features via plugins
--   **TypeScript:** type definitions come built-in in the package
--   **RTL:** compatible with RTL layout
+- **Built for React:** works with React 18, 17 and 16.8.0+
+- **UX:** supports keyboard, mouse, touchpad and touchscreen navigation
+- **Preloading:** never displays partially downloaded images
+- **Performance:** preloads limited number of images without compromising
+  performance or UX
+- **Responsive:** responsive images with automatic resolution switching are
+  supported out of the box
+- **Video:** video slides are supported via an optional plugin
+- **Zoom:** image zoom is supported via an optional plugin
+- **Customization:** customize any UI element or add your own custom slides
+- **No bloat:** never bundle rarely used features; add optional features via
+  plugins
+- **TypeScript:** type definitions come built-in in the package
+- **RTL:** compatible with RTL layout
 
@@ -40,8 +44,2 @@ ![Yet Another React Lightbox | Example](https://yet-another-react-lightbox.com/images/example.jpg)
 
-or
-
-```shell
-yarn add yet-another-react-lightbox
-```
-
 ## Minimal Setup Example
@@ -55,17 +53,21 @@
 export default function App() {
-    const [open, setOpen] = React.useState(false);
+  const [open, setOpen] = React.useState(false);
 
-    return (
-        <>
-            <button type="button" onClick={() => setOpen(true)}>
-                Open Lightbox
-            </button>
+  return (
+    <>
+      <button type="button" onClick={() => setOpen(true)}>
+        Open Lightbox
+      </button>
 
-            <Lightbox
-                open={open}
-                close={() => setOpen(false)}
-                slides={[{ src: "/image1.jpg" }, { src: "/image2.jpg" }, { src: "/image3.jpg" }]}
-            />
-        </>
-    );
+      <Lightbox
+        open={open}
+        close={() => setOpen(false)}
+        slides={[
+          { src: "/image1.jpg" },
+          { src: "/image2.jpg" },
+          { src: "/image3.jpg" },
+        ]}
+      />
+    </>
+  );
 }
@@ -76,6 +78,8 @@ ```
 
-Unlike many other lightbox libraries, Yet Another React Lightbox doesn't have a concept of "thumbnail" or "original"
-(or "full size") images. We use responsive images instead and recommend you provide multiple files of different
-resolutions for each image. Yet Another React Lightbox automatically populates `srcset` / `sizes` attributes and lets
-the browser decide which image is more appropriate for its viewport size.
+Unlike many other lightbox libraries, Yet Another React Lightbox doesn't have a
+concept of "thumbnail" or "original" (or "full size") images. We use responsive
+images instead and recommend you provide multiple files of different resolutions
+for each image. Yet Another React Lightbox automatically populates `srcset` /
+`sizes` attributes and lets the browser decide which image is more appropriate
+for its viewport size.
 
@@ -88,55 +92,67 @@ ```jsx
 export default function App() {
-    const [open, setOpen] = React.useState(false);
+  const [open, setOpen] = React.useState(false);
 
-    return (
-        <>
-            <button type="button" onClick={() => setOpen(true)}>
-                Open Lightbox
-            </button>
+  return (
+    <>
+      <button type="button" onClick={() => setOpen(true)}>
+        Open Lightbox
+      </button>
 
-            <Lightbox
-                open={open}
-                close={() => setOpen(false)}
-                slides={[
-                    {
-                        src: "/image1x3840.jpg",
-                        alt: "image 1",
-                        width: 3840,
-                        height: 2560,
-                        srcSet: [
-                            { src: "/image1x320.jpg", width: 320, height: 213 },
-                            { src: "/image1x640.jpg", width: 640, height: 427 },
-                            { src: "/image1x1200.jpg", width: 1200, height: 800 },
-                            { src: "/image1x2048.jpg", width: 2048, height: 1365 },
-                            { src: "/image1x3840.jpg", width: 3840, height: 2560 },
-                        ],
-                    },
-                    // ...
-                ]}
-            />
-        </>
-    );
+      <Lightbox
+        open={open}
+        close={() => setOpen(false)}
+        slides={[
+          {
+            src: "/image1x3840.jpg",
+            alt: "image 1",
+            width: 3840,
+            height: 2560,
+            srcSet: [
+              { src: "/image1x320.jpg", width: 320, height: 213 },
+              { src: "/image1x640.jpg", width: 640, height: 427 },
+              { src: "/image1x1200.jpg", width: 1200, height: 800 },
+              { src: "/image1x2048.jpg", width: 2048, height: 1365 },
+              { src: "/image1x3840.jpg", width: 3840, height: 2560 },
+            ],
+          },
+          // ...
+        ]}
+      />
+    </>
+  );
 }
 ```
 
-You can also integrate 3rd-party image components (e.g., Next.js Image or Gatsby Image) via a custom render function.
-See [examples](https://yet-another-react-lightbox.com/examples) on the documentation website.
+You can also integrate 3rd-party image components (e.g., Next.js Image or Gatsby
+Image) via a custom render function. See
+[examples](https://yet-another-react-lightbox.com/examples) on the documentation
+website.
 
 ## Plugins
 
-Yet Another React Lightbox allows you to add optional features to your project based on your requirements via plugins.
+Yet Another React Lightbox allows you to add optional features to your project
+based on your requirements via plugins.
 
 The following plugins are bundled in the package:
 
--   [Captions](https://yet-another-react-lightbox.com/plugins/captions) - adds support for slide title and
-    description
--   [Counter](https://yet-another-react-lightbox.com/plugins/counter) - adds slides counter
--   [Download](https://yet-another-react-lightbox.com/plugins/download) - adds download button
--   [Fullscreen](https://yet-another-react-lightbox.com/plugins/fullscreen) - adds support for fullscreen mode
--   [Inline](https://yet-another-react-lightbox.com/plugins/inline) - transforms the lightbox into an image carousel
--   [Share](https://yet-another-react-lightbox.com/plugins/share) - adds sharing button
--   [Slideshow](https://yet-another-react-lightbox.com/plugins/slideshow) - adds slideshow button
--   [Thumbnails](https://yet-another-react-lightbox.com/plugins/thumbnails) - adds thumbnails track
--   [Video](https://yet-another-react-lightbox.com/plugins/video) - adds support for video slides
--   [Zoom](https://yet-another-react-lightbox.com/plugins/zoom) - adds image zoom feature
+- [Captions](https://yet-another-react-lightbox.com/plugins/captions) - adds
+  support for slide title and description
+- [Counter](https://yet-another-react-lightbox.com/plugins/counter) - adds
+  slides counter
+- [Download](https://yet-another-react-lightbox.com/plugins/download) - adds
+  download button
+- [Fullscreen](https://yet-another-react-lightbox.com/plugins/fullscreen) - adds
+  support for fullscreen mode
+- [Inline](https://yet-another-react-lightbox.com/plugins/inline) - transforms
+  the lightbox into an image carousel
+- [Share](https://yet-another-react-lightbox.com/plugins/share) - adds sharing
+  button
+- [Slideshow](https://yet-another-react-lightbox.com/plugins/slideshow) - adds
+  slideshow button
+- [Thumbnails](https://yet-another-react-lightbox.com/plugins/thumbnails) - adds
+  thumbnails track
+- [Video](https://yet-another-react-lightbox.com/plugins/video) - adds support
+  for video slides
+- [Zoom](https://yet-another-react-lightbox.com/plugins/zoom) - adds image zoom
+  feature
 
@@ -143,0 +159,0 @@ ## License

No alert changes

Improved metrics

Total package byte prevSize

216391

increased by0.14%

Lines of code

4014

increased by0.07%

Number of lines in readme file

157

increased by11.35%

No dependency changes