{"_id":"@amlab/yet-another-react-lightbox-lite","_rev":"3-10e60bd45b27ff5f38a3df846cc24757","name":"@amlab/yet-another-react-lightbox-lite","dist-tags":{"latest":"1.9.0"},"versions":{"1.7.0":{"name":"@amlab/yet-another-react-lightbox-lite","version":"1.7.0","keywords":["react","lightbox","react lightbox","react lightbox lite","lightweight react lightbox"],"author":{"name":"Igor Danchenko, Alex Malitsky"},"license":"MIT","_id":"@amlab/yet-another-react-lightbox-lite@1.7.0","maintainers":[{"name":"amalitsky","email":"code@amalitsky.com"}],"homepage":"https://github.com/amalitsky/yet-another-react-lightbox-lite","bugs":{"url":"https://github.com/amalitsky/yet-another-react-lightbox-lite/issues"},"dist":{"shasum":"8d184f081e8cc246982c7f16ff571faeb0db1580","tarball":"https://registry.npmjs.org/@amlab/yet-another-react-lightbox-lite/-/yet-another-react-lightbox-lite-1.7.0.tgz","fileCount":7,"integrity":"sha512-JsGCaXdK1j56Xs2kCRSGUKWm5jNEUklkCdFFy6msaIq9M09YdKeD+18SKxg6Rl9mLsRp4vHcDzBhUjuVLZeALw==","signatures":[{"sig":"MEUCIQDoZj8jA3nQL+Mm/FNlvo8uAEUBGXQBiYJ3xlOVMNhuNQIgKSwbORHt8tPH/jqT5ctiV7CZLixZ6wC7iu8TFJB8CJM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@amlab%2fyet-another-react-lightbox-lite@1.7.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":52834},"type":"module","types":"dist/index.d.ts","module":"dist/index.js","engines":{"node":">=18"},"exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"./styles.css":{"types":"./dist/styles.css.d.ts","default":"./dist/styles.css"}},"gitHead":"3e059560dab9ed37b34725af8a662f482fea3f77","_npmUser":{"name":"amalitsky","email":"code@amalitsky.com"},"repository":{"url":"git+https://github.com/amalitsky/yet-another-react-lightbox-lite.git","type":"git"},"_npmVersion":"10.9.2","description":"Fork of igordanchenko/yet-another-react-lightbox-lite","directories":{},"sideEffects":["*.css"],"_nodeVersion":"22.12.0","publishConfig":{"access":"public","provenance":true},"_hasShrinkwrap":false,"peerDependencies":{"react":">=18","react-dom":">=18","@types/react":">=18","@types/react-dom":">=18"},"peerDependenciesMeta":{"@types/react":{"optional":true},"@types/react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/yet-another-react-lightbox-lite_1.7.0_1737484639294_0.3253912350984256","host":"s3://npm-registry-packages-npm-production"}},"1.8.0":{"name":"@amlab/yet-another-react-lightbox-lite","version":"1.8.0","keywords":["react","lightbox","react lightbox","react lightbox lite","lightweight react lightbox"],"author":{"name":"Igor Danchenko, Alex Malitsky"},"license":"MIT","_id":"@amlab/yet-another-react-lightbox-lite@1.8.0","maintainers":[{"name":"amalitsky","email":"code@amalitsky.com"}],"homepage":"https://github.com/amalitsky/yet-another-react-lightbox-lite","bugs":{"url":"https://github.com/amalitsky/yet-another-react-lightbox-lite/issues"},"dist":{"shasum":"12360d5dee151516ccacf38fcaf490db6c499293","tarball":"https://registry.npmjs.org/@amlab/yet-another-react-lightbox-lite/-/yet-another-react-lightbox-lite-1.8.0.tgz","fileCount":7,"integrity":"sha512-lBOyafB9ZWK1R2uW0GNgF8IzNOAxiDY5U6vslbwexci0E0yGgMW9SiixGE0JzeXPYosmcVg10vQZ6N6aHShvFA==","signatures":[{"sig":"MEUCIFMYTq5Jtv8ASh2xYwF9zR2u24GJg2HCi/hM4qixEPRZAiEAm+lgq/0LLVP/a7Jvi52HbsVhZaShU7uLaBtl4tj4Lj4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@amlab%2fyet-another-react-lightbox-lite@1.8.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":53312},"type":"module","types":"dist/index.d.ts","module":"dist/index.js","engines":{"node":">=18"},"exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"./styles.css":{"types":"./dist/styles.css.d.ts","default":"./dist/styles.css"}},"gitHead":"655fed87f3aa4c99b9360f1cb30f716ab3793d24","_npmUser":{"name":"amalitsky","email":"code@amalitsky.com"},"repository":{"url":"git+https://github.com/amalitsky/yet-another-react-lightbox-lite.git","type":"git"},"_npmVersion":"10.9.2","description":"Fork of igordanchenko/yet-another-react-lightbox-lite","directories":{},"sideEffects":["*.css"],"_nodeVersion":"22.13.1","publishConfig":{"access":"public","provenance":true},"_hasShrinkwrap":false,"peerDependencies":{"react":"^18 || ^19","react-dom":"^18 || ^19","@types/react":"^18 || ^19","@types/react-dom":"^18 || ^19"},"peerDependenciesMeta":{"@types/react":{"optional":true},"@types/react-dom":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/yet-another-react-lightbox-lite_1.8.0_1738451106962_0.3033322301591854","host":"s3://npm-registry-packages-npm-production"}},"1.9.0":{"name":"@amlab/yet-another-react-lightbox-lite","version":"1.9.0","description":"Fork of igordanchenko/yet-another-react-lightbox-lite","author":{"name":"Igor Danchenko, Alex Malitsky"},"license":"MIT","type":"module","module":"dist/index.js","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"./styles.css":{"types":"./dist/styles.css.d.ts","default":"./dist/styles.css"}},"sideEffects":["*.css"],"homepage":"https://github.com/amalitsky/yet-another-react-lightbox-lite","repository":{"type":"git","url":"git+https://github.com/amalitsky/yet-another-react-lightbox-lite.git"},"bugs":{"url":"https://github.com/amalitsky/yet-another-react-lightbox-lite/issues"},"engines":{"node":">=18"},"publishConfig":{"access":"public","provenance":true},"peerDependencies":{"@types/react":"^18 || ^19","@types/react-dom":"^18 || ^19","react":"^18 || ^19","react-dom":"^18 || ^19"},"peerDependenciesMeta":{"@types/react":{"optional":true},"@types/react-dom":{"optional":true}},"keywords":["react","lightbox","react lightbox","react lightbox lite","lightweight react lightbox"],"_id":"@amlab/yet-another-react-lightbox-lite@1.9.0","gitHead":"5e5e02ac9dabd6ddf95a6a6fa3ca1a64dbed7c5f","_nodeVersion":"22.14.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-lKyzB5NtXETeVr/ozh16TaxDM/nygSq9ZRVaCpOlDn431URWiPOKz1N0gC+11IZeXslRYkmvfrlvD5ji5z+uRQ==","shasum":"c088c502554461000349f453405cfec50f0deefd","tarball":"https://registry.npmjs.org/@amlab/yet-another-react-lightbox-lite/-/yet-another-react-lightbox-lite-1.9.0.tgz","fileCount":7,"unpackedSize":53205,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@amlab%2fyet-another-react-lightbox-lite@1.9.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDBl0DANAjXPdRAfCWVRRa/Uc+BXc6k2zRu4313DkToEgIhALE+H7QGXLDrOVHQjHwf1b6FpFPTp8H8G4injz6VS7eP"}]},"_npmUser":{"name":"amalitsky","email":"code@amalitsky.com"},"directories":{},"maintainers":[{"name":"amalitsky","email":"code@amalitsky.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/yet-another-react-lightbox-lite_1.9.0_1743911618036_0.930798162043565"},"_hasShrinkwrap":false}},"time":{"created":"2025-01-21T18:37:19.211Z","modified":"2025-04-06T03:53:38.641Z","1.7.0":"2025-01-21T18:37:19.470Z","1.8.0":"2025-02-01T23:05:07.181Z","1.9.0":"2025-04-06T03:53:38.230Z"},"bugs":{"url":"https://github.com/amalitsky/yet-another-react-lightbox-lite/issues"},"author":{"name":"Igor Danchenko, Alex Malitsky"},"license":"MIT","homepage":"https://github.com/amalitsky/yet-another-react-lightbox-lite","keywords":["react","lightbox","react lightbox","react lightbox lite","lightweight react lightbox"],"repository":{"type":"git","url":"git+https://github.com/amalitsky/yet-another-react-lightbox-lite.git"},"description":"Fork of igordanchenko/yet-another-react-lightbox-lite","maintainers":[{"name":"amalitsky","email":"code@amalitsky.com"}],"readme":"# Yet Another React Lightbox Lite\n\nLightweight React lightbox component. This is a trimmed-down version of the\n[yet-another-react-lightbox](https://github.com/igordanchenko/yet-another-react-lightbox)\nthat provides essential lightbox features and slick UX with just 4.6KB bundle\nsize.\n\n## Overview\n\n[![NPM Version](https://img.shields.io/npm/v/yet-another-react-lightbox-lite.svg?color=blue)](https://www.npmjs.com/package/yet-another-react-lightbox-lite)\n[![Bundle Size](https://img.shields.io/bundlephobia/minzip/yet-another-react-lightbox-lite.svg?color=blue)](https://bundlephobia.com/package/yet-another-react-lightbox-lite)\n[![License MIT](https://img.shields.io/npm/l/yet-another-react-lightbox-lite.svg?color=blue)](https://github.com/igordanchenko/yet-another-react-lightbox-lite/blob/main/LICENSE)\n\n- **Built for React:** works with React 18+\n- **UX:** supports keyboard, mouse, touchpad and touchscreen navigation\n- **Zoom:** zoom is supported out of the box\n- **Performance:** preloads a fixed number of images without compromising\n performance or UX\n- **Responsive:** responsive images with automatic resolution switching are\n supported out of the box\n- **Customization:** customize any UI element or add your own custom slides\n- **No bloat:** supports only essential lightbox features\n- **TypeScript:** type definitions come built-in in the package\n\n## Documentation\n\n[https://github.com/igordanchenko/yet-another-react-lightbox-lite](https://github.com/igordanchenko/yet-another-react-lightbox-lite)\n\n## Examples\n\n- Live demo -\n [https://stackblitz.com/edit/yet-another-react-lightbox-lite](https://stackblitz.com/edit/yet-another-react-lightbox-lite?file=src%2FApp.tsx)\n- Examples -\n [https://stackblitz.com/edit/yet-another-react-lightbox-lite-examples](https://stackblitz.com/edit/yet-another-react-lightbox-lite-examples?file=src%2FApp.tsx)\n\n## Changelog\n\n[https://github.com/igordanchenko/yet-another-react-lightbox-lite/releases](https://github.com/igordanchenko/yet-another-react-lightbox-lite/releases)\n\n## Requirements\n\n- React 18+\n- Node 18+\n- modern ESM-compatible bundler\n\n## Installation\n\n```shell\nnpm install yet-another-react-lightbox-lite\n```\n\n## Minimal Setup Example\n\n```tsx\nimport { useState } from \"react\";\nimport Lightbox from \"yet-another-react-lightbox-lite\";\nimport \"yet-another-react-lightbox-lite/styles.css\";\n\nexport default function App() {\n const [index, setIndex] = useState();\n\n return (\n <>\n \n\n \n \n );\n}\n```\n\n## Responsive Images\n\nTo utilize responsive images with automatic resolution switching, provide\n`srcset` images in the slide `srcSet` array.\n\n```tsx\n\n```\n\n## Next.js Image\n\nIf your project is based on [Next.js](https://nextjs.org/), you may want to take\nadvantage of the\n[next/image](https://nextjs.org/docs/pages/api-reference/components/image)\ncomponent. The `next/image` component provides a more efficient way to handle\nimages in your Next.js project. You can replace the standard `` element\nwith `next/image` with the following `render.slide` render function.\n\n```tsx\n {\n const width =\n slide.width && slide.height\n ? Math.round(\n Math.min(rect.width, (rect.height / slide.height) * slide.width),\n )\n : rect.width;\n\n const height =\n slide.width && slide.height\n ? Math.round(\n Math.min(rect.height, (rect.width / slide.width) * slide.height),\n )\n : rect.height;\n\n return (\n \n );\n },\n }}\n // ...\n/>\n```\n\n## API\n\nYet Another React Lightbox Lite comes with CSS stylesheet that needs to be\nimported in your app.\n\n```tsx\nimport \"yet-another-react-lightbox-lite/styles.css\";\n```\n\nThe lightbox component accepts the following props.\n\n### slides\n\nType: `Slide[]`\n\nAn array of slides to display in the lightbox. This prop is required. By\ndefault, the lightbox supports only image slides. You can add support for custom\nslides through a custom render function (see example below).\n\nImage slide props:\n\n- `src` - image source (required)\n- `alt` - image `alt` attribute\n\n### index\n\nType: `number | undefined`\n\nCurrent slide index. This prop is required.\n\n### setIndex\n\nType: `(index: number | undefined) => void`\n\nA callback to update current slide index state. This prop is required.\n\n### labels\n\nType: `keyof Labels`\n\nCustom UI labels / translations.\n\n```tsx\n\n```\n\n### toolbar\n\nType: `object`\n\nToolbar settings.\n\n- `buttons` - custom toolbar buttons (type: `ReactNode[]`)\n- `fixed` - if `true`, the toolbar is positioned statically above the carousel\n\nUsage example:\n\n```tsx\n {\n // ...\n }}\n >\n \n ,\n ],\n }}\n // ...\n/>\n```\n\n### carousel\n\nType: `object`\n\nCarousel settings.\n\n- `preload` - the lightbox preloads `(2 * preload + 1)` slides (default: `2`)\n- `imageProps` - custom image slide attributes\n\nUsage example:\n\n```tsx\n\n```\n\n### controller\n\nType: `object`\n\nController settings.\n\n- `closeOnPullUp` - if `true`, close the lightbox on pull-up gesture (default:\n `true`)\n- `closeOnPullDown` - if `true`, close the lightbox on pull-down gesture\n (default: `true`)\n- `closeOnBackdropClick` - if `true`, close the lightbox when the backdrop is\n clicked (default: `true`)\n\nUsage example:\n\n```tsx\n\n```\n\n### render\n\nType: `object`\n\nAn object providing custom render functions.\n\n```tsx\n (\n \n ),\n slideHeader: ({ slide, rect, zoom, current }) => (\n \n ),\n slideFooter: ({ slide, rect, zoom, current }) => (\n \n ),\n controls: () => ,\n iconPrev: () => ,\n iconNext: () => ,\n iconClose: () => ,\n }}\n // ...\n/>\n```\n\n#### slide: ({ slide, rect, zoom, current }) => ReactNode\n\nRender custom slide type, or override the default image slide implementation.\n\nParameters:\n\n- `slide` - slide object (type: `Slide`)\n- `rect` - slide rect size (type: `Rect`)\n- `zoom` - current zoom level (type: `number`)\n- `current` - if `true`, the slide is the current slide in the viewport (type:\n `boolean`)\n\n#### slideHeader: ({ slide, rect, zoom, current }) => ReactNode\n\nRender custom elements above each slide.\n\n#### slideFooter: ({ slide, rect, zoom, current }) => ReactNode\n\nRender custom elements below or over each slide. By default, the content is\nrendered right under the slide. Alternatively, you can use\n`position: \"absolute\"` to position the extra elements relative to the slide.\n\nFor example, you can use the `slideFooter` render function to add slides\ndescriptions.\n\n```tsx\n (\n
{slide.description}
\n ),\n }}\n // ...\n/>\n```\n\n#### controls: () => ReactNode\n\nRender custom controls or additional elements in the lightbox (use absolute\npositioning).\n\nFor example, you can use the `render.controls` render function to implement\nslides counter.\n\n```tsx\n\n index !== undefined && (\n
\n {index + 1} of {slides.length}\n
\n ),\n }}\n // ...\n/>\n```\n\n#### iconPrev: () => ReactNode\n\nRender custom `Previous` icon.\n\n#### iconNext: () => ReactNode\n\nRender custom `Next` icon.\n\n#### iconClose: () => ReactNode\n\nRender custom `Close` icon.\n\n### styles\n\nType: `{ [key in Slot]?: SlotCSSProperties }`\n\nCustomization slots styles allow you to specify custom CSS styles or override\n`--yarll__*` CSS variables by passing your custom styles through to the\ncorresponding lightbox elements.\n\nSupported customization slots:\n\n- `portal` - lightbox portal (root)\n- `carousel` - lightbox carousel\n- `slide` - lightbox slide\n- `image` - lightbox slide image\n- `toolbar` - lightbox toolbar\n- `button` - lightbox button\n- `icon` - lightbox icon\n\nUsage example:\n\n```tsx\n\n```\n\n### className\n\nType: `string`\n\nCSS class of the lightbox root element. You can use this class name to provide\nmodule-scoped style overrides.\n\n### zoom\n\nType: `object`\n\nZoom settings.\n\n- `disabled` - disable zoom on image slides\n- `supports` - zoom-enabled custom slide types\n\nUsage example:\n\n```tsx\n\n```\n\n## Custom Slide Attributes\n\nYou can add custom slide attributes with the following module augmentation.\n\n```tsx\ndeclare module \"yet-another-react-lightbox-lite\" {\n interface GenericSlide {\n description?: string;\n }\n}\n```\n\n## Custom Slides\n\nYou can add custom slide types through module augmentation and render them with\nthe `render.slide` render function.\n\nHere is an example demonstrating video slides implementation.\n\n```tsx\ndeclare module \"yet-another-react-lightbox-lite\" {\n interface SlideVideo extends GenericSlide {\n type: \"video\";\n src: string;\n poster: string;\n width: number;\n height: number;\n }\n\n interface SlideTypes {\n video: SlideVideo;\n }\n}\n\n// ...\n\n\n slide.type === \"video\" ? (\n \n \n \n ) : undefined,\n }}\n // ...\n/>;\n```\n\n## Code Splitting (Suspense)\n\n```tsx\n// Lightbox.tsx\nimport LightboxComponent, {\n LightboxProps,\n} from \"yet-another-react-lightbox-lite\";\nimport \"yet-another-react-lightbox-lite/styles.css\";\n\nexport default function Lightbox(props: LightboxProps) {\n return ;\n}\n```\n\n```tsx\n// App.tsx\nimport { lazy, Suspense, useState } from \"react\";\nimport slides from \"./slides\";\n\nconst Lightbox = lazy(() => import(\"./Lightbox\"));\n\nexport default function App() {\n const [index, setIndex] = useState();\n\n return (\n <>\n \n\n {index !== undefined && (\n \n \n \n )}\n \n );\n}\n```\n\n## Body Scroll Lock\n\nBy default, the lightbox hides the browser window scrollbar and prevents\ndocument `` from scrolling underneath the lightbox by assigning the\n`height: 100%; overflow: hidden;` styles to the document `` element.\n\nIf this behavior causes undesired side effects in your case, and you prefer not\nto use this feature, you can turn it off by assigning the\n`yarll__no_scroll_lock` class to the lightbox.\n\n```tsx\n\n```\n\nHowever, if you keep the body scroll lock feature on, you may notice a visual\nlayout shift of some fixed-positioned page elements when the lightbox opens. To\naddress this, you can assign the `yarll__fixed` CSS class to your\nfixed-positioned elements to keep them in place. Please note that the\nfixed-positioned element container should not have its own border or padding\nstyles. If that's the case, you can always add an extra wrapper that just\ndefines the fixed position without visual styles.\n\n## Text Selection\n\nThe lightbox is rendered with the `user-select: none` CSS style. If you'd like\nto make some of your custom elements user-selectable, use the\n`yarll__selectable` CSS class. This class sets the `user-select: text` style and\nturns off click-and-drag slide navigation, likely interfering with text\nselection UX.\n\n## Hooks\n\nThe library exports the following hooks that you may find helpful in customizing\nlightbox functionality.\n\n### useZoom\n\nYou can use the `useZoom` hook to build your custom zoom controls.\n\n```tsx\nimport { useZoom } from \"yet-another-react-lightbox-lite\";\n```\n\nThe hook provides an object with the following props:\n\n- `rect` - slide rect\n- `zoom` - current zoom level (numeric value between `1` and `8`)\n- `maxZoom` - maximum zoom level (`1` if zoom is not supported on the current\n slide)\n- `offsetX` - horizontal slide position offset\n- `offsetY` - vertical slide position offset\n- `changeZoom` - change zoom level\n- `changeOffsets` - change position offsets\n\n## License\n\nMIT © 2024 [Igor Danchenko](https://github.com/igordanchenko)\n","readmeFilename":"README.md"}