yet-another-react-lightbox-lite 1.3.1 → 1.4.0

package/README.md

@@ -26,9 +26,12 @@ size.
 
 [https://github.com/igordanchenko/yet-another-react-lightbox-lite](https://github.com/igordanchenko/yet-another-react-lightbox-lite)
 
-## Live Demo
+## Examples
 
-[https://stackblitz.com/edit/yet-another-react-lightbox-lite](https://stackblitz.com/edit/yet-another-react-lightbox-lite)
+- Live demo -
+  [https://stackblitz.com/edit/yet-another-react-lightbox-lite](https://stackblitz.com/edit/yet-another-react-lightbox-lite?file=src%2FApp.tsx)
+- Examples -
+  [https://stackblitz.com/edit/yet-another-react-lightbox-lite-examples](https://stackblitz.com/edit/yet-another-react-lightbox-lite-examples?file=src%2FApp.tsx)
 
 ## Changelog
 
@@ -235,6 +238,27 @@ Usage example:
 />
 ```
 
+### carousel
+
+Type: `object`
+
+Carousel settings.
+
+- `preload` - the lightbox preloads `(2 * preload + 1)` slides (default: `2`)
+- `imageProps` - custom image slide attributes
+
+Usage example:
+
+```tsx
+<Lightbox
+  carousel={{
+    preload: 5,
+    imageProps: { crossOrigin: "anonymous" },
+  }}
+  // ...
+/>
+```
+
 ### controller
 
 Type: `object`

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import React, { MouseEvent } from 'react';
+import { Dispatch, SetStateAction, Key, ReactNode, ComponentProps, CSSProperties, MouseEvent } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 /** Lightbox props */
@@ -8,13 +8,15 @@ interface LightboxProps {
     /** slide index */
     index: number | undefined;
     /** slide index change callback */
-    setIndex: (index: number | undefined) => void;
+    setIndex: Dispatch<SetStateAction<number | undefined>>;
     /** custom UI labels / translations */
     labels?: Labels;
     /** custom render functions */
     render?: Render;
     /** toolbar settings */
     toolbar?: ToolbarSettings;
+    /** carousel settings */
+    carousel?: CarouselSettings;
     /** controller settings */
     controller?: ControllerSettings;
     /** zoom settings */
@@ -36,7 +38,7 @@ type SlideTypeKey = keyof SlideTypes;
 /** Generic slide */
 interface GenericSlide {
     /** slide key */
-    key?: React.Key;
+    key?: Key;
     /** slide type */
     type?: SlideTypeKey;
 }
@@ -103,10 +105,17 @@ interface RenderSlideProps {
 /** Toolbar settings */
 interface ToolbarSettings {
     /** custom toolbar buttons */
-    buttons?: React.ReactNode[];
+    buttons?: ReactNode[];
     /** if `true`, the toolbar is positioned statically above the carousel */
     fixed?: boolean;
 }
+/** Carousel settings */
+interface CarouselSettings {
+    /** the lightbox preloads (2 * preload + 1) slides */
+    preload?: number;
+    /** custom image slide attributes */
+    imageProps?: ComponentProps<"img">;
+}
 /** Controller settings */
 interface ControllerSettings {
     /** if `true`, close the lightbox on pull-up gesture (default: `true`) */
@@ -141,7 +150,7 @@ interface SlotType {
 /** Customization slots */
 type Slot = SlotType[keyof SlotType];
 /** Customization slot CSS properties */
-interface SlotCSSProperties extends React.CSSProperties {
+interface SlotCSSProperties extends CSSProperties {
     [key: `--yarll__${string}`]: string | number;
 }
 /** Customization slots styles */
@@ -150,13 +159,15 @@ type SlotStyles = {
 };
 /** Rect */
 type Rect = {
+    /** rect width */
     width: number;
+    /** rect height */
     height: number;
 };
 /** Generic callback function */
 type Callback<T = void> = () => T;
 /** Render function */
-type RenderFunction<T = void> = [T] extends [void] ? () => React.ReactNode : (props: T) => React.ReactNode;
+type RenderFunction<T = void> = [T] extends [void] ? () => ReactNode : (props: T) => ReactNode;
 
 /** Lightbox component */
 declare function Lightbox({ slides, index, setIndex, ...rest }: LightboxProps): react_jsx_runtime.JSX.Element | null;
@@ -185,4 +196,4 @@ type ZoomContextType = {
 /** `useZoom` hook */
 declare const useZoom: () => ZoomContextType;
 
-export { type Callback, type ControllerSettings, type GenericSlide, type ImageSource, type Label, type Labels, type LightboxProps, type Rect, type Render, type RenderFunction, type RenderSlideProps, type Slide, type SlideImage, type SlideTypeKey, type SlideTypes, type Slot, type SlotStyles, type SlotType, type ToolbarSettings, type ZoomSettings, Lightbox as default, useZoom as unstable_useZoom };
+export { type Callback, type CarouselSettings, type ControllerSettings, type GenericSlide, type ImageSource, type Label, type Labels, type LightboxProps, type Rect, type Render, type RenderFunction, type RenderSlideProps, type Slide, type SlideImage, type SlideTypeKey, type SlideTypes, type Slot, type SlotStyles, type SlotType, type ToolbarSettings, type ZoomSettings, Lightbox as default, useZoom as unstable_useZoom };

package/dist/index.js

@@ -135,7 +135,7 @@ function getImageDimensions(slide, rect) {
 function ImageSlide({ slide, rect, zoom }) {
     const [scale, setScale] = useState(1);
     const persistScaleTimeout = useRef();
-    const { styles } = useLightboxContext();
+    const { carousel: { imageProps } = {}, styles } = useLightboxContext();
     if (zoom > scale) {
         clearTimeout(persistScaleTimeout.current);
         persistScaleTimeout.current = setTimeout(() => {
@@ -149,16 +149,16 @@ function ImageSlide({ slide, rect, zoom }) {
         .join(", ");
     const [width, height] = getImageDimensions(slide, rect);
     const sizes = width ? `${round(width * scale, 2)}px` : undefined;
-    return (jsx("img", { draggable: false, style: styles?.image, className: cssClass("slide_image"), srcSet: srcSet, sizes: sizes, width: width, height: height, src: slide.src, alt: slide.alt }));
+    return (jsx("img", { draggable: false, style: styles?.image, className: cssClass("slide_image"), srcSet: srcSet, sizes: sizes, width: width, height: height, src: slide.src, alt: slide.alt, ...imageProps }));
 }
 
 function Carousel() {
-    const { slides, index, styles, render: { slide: renderSlide, slideHeader, slideFooter } = {} } = useLightboxContext();
+    const { slides, index, styles, carousel: { preload = 2 } = {}, render: { slide: renderSlide, slideHeader, slideFooter } = {}, } = useLightboxContext();
     const { rect, zoom, offsetX, offsetY } = useZoom();
     const { setCarouselRef } = useZoomInternal();
     return (jsx("div", { ref: setCarouselRef, style: styles?.carousel, className: cssClass("carousel"), children: rect &&
-            Array.from({ length: 5 }).map((_, i) => {
-                const slideIndex = index - 2 + i;
+            Array.from({ length: 2 * preload + 1 }).map((_, i) => {
+                const slideIndex = index - preload + i;
                 if (slideIndex < 0 || slideIndex >= slides.length)
                     return null;
                 const slide = slides[slideIndex];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yet-another-react-lightbox-lite",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "Lightweight React lightbox component",
   "author": "Igor Danchenko",
   "license": "MIT",