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

Comparing version 3.11.4 to 3.12.0

dist/index.d.ts

@@ -237,5 +237,6 @@ import * as React from 'react';
     disabled?: boolean;
+    style?: React.CSSProperties;
 };
-declare function NavigationButton({ label, icon, renderIcon, action, onClick, disabled }: NavigationButtonProps): React.JSX.Element;
-declare function Navigation({ carousel: { finite }, animation, render: { buttonPrev, buttonNext, iconPrev, iconNext }, }: ComponentProps): React.JSX.Element;
+declare function NavigationButton({ label, icon, renderIcon, action, onClick, disabled, style }: NavigationButtonProps): React.JSX.Element;
+declare function Navigation({ carousel: { finite }, animation, render: { buttonPrev, buttonNext, iconPrev, iconNext }, styles, }: ComponentProps): React.JSX.Element;
 declare const NavigationModule: Module;
@@ -252,5 +253,5 @@
 
-declare function Toolbar({ toolbar: { buttons }, render: { buttonClose, iconClose } }: ComponentProps): React.JSX.Element;
+declare function Toolbar({ toolbar: { buttons }, render: { buttonClose, iconClose }, styles }: ComponentProps): React.JSX.Element;
 declare const ToolbarModule: 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 };

dist/plugins/video/index.js

@@ -99,3 +99,3 @@ import * as React from 'react';
                 if (isVideoSlide(slide)) {
-                    return (React.createElement(VideoSlide, { key: `${(_a = slide.sources) === null || _a === void 0 ? void 0 : _a.map((source) => source.src).join(" ")}`, slide: slide, offset: offset }));
+                    return (React.createElement(VideoSlide, { key: (_a = slide.sources) === null || _a === void 0 ? void 0 : _a.map((source) => source.src).join(" "), slide: slide, offset: offset }));
                 }
@@ -102,0 +102,0 @@ return renderSlide === null || renderSlide === void 0 ? void 0 : renderSlide({ slide, offset, rect });

dist/types.d.ts

@@ -170,2 +170,8 @@ import * as React from 'react';
     icon: "icon";
+    /** lightbox toolbar customization slot */
+    toolbar: "toolbar";
+    /** lightbox Prev navigation button customization slot */
+    navigationPrev: "navigationPrev";
+    /** lightbox Next navigation button customization slot */
+    navigationNext: "navigationNext";
 }
@@ -172,0 +178,0 @@ /** Customization slot CSS properties */

package.json

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

README.md

@@ -9,15 +9,15 @@ # Yet Another React Lightbox
 [![Bundle Size](https://img.shields.io/bundlephobia/minzip/yet-another-react-lightbox?color=blue)](https://bundlephobia.com/package/yet-another-react-lightbox)
-[![License MIT](https://img.shields.io/npm/l/yet-another-react-lightbox?color=blue)](LICENSE)
+[![License MIT](https://img.shields.io/npm/l/yet-another-react-lightbox?color=blue)](https://github.com/igordanchenko/yet-another-react-lightbox/blob/main/LICENSE)
 
-- **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
 
@@ -54,21 +54,17 @@ ![Yet Another React Lightbox | Example](https://yet-another-react-lightbox.com/images/example.jpg)
 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" }]}
+            />
+        </>
+    );
 }
@@ -90,32 +86,32 @@ ```
 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 },
+                        ],
+                    },
+                    // ...
+                ]}
+            />
+        </>
+    );
 }
@@ -133,13 +129,13 @@ ```
 
-- [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
 
@@ -146,0 +142,0 @@ ## License

No alert changes

Improved metrics

Total package byte prevSize

216073

increased by0.39%

Lines of code

4008

increased by0.2%

Worsened metrics

Number of lines in readme file

141

decreased by-2.76%

No dependency changes