{"id":12698,"library":"yet-another-react-lightbox","title":"Yet Another React Lightbox","description":"Yet Another React Lightbox (YARL) is a modern, performant, and highly customizable React component designed for displaying images and and videos in a lightbox interface. Currently at stable version 3.31.0, it receives frequent updates, with several patch and minor releases in recent months, indicating an active development cadence. Key differentiators include its focus on responsive images using `srcset` and `sizes` for optimal loading, support for various navigation methods (keyboard, mouse, touch), and a modular architecture that utilizes optional plugins for features like zoom, captions, and video support. It is built to work with React versions 16.8.0 through 19, provides built-in TypeScript definitions, and is compatible with RTL layouts, ensuring broad compatibility and developer experience.","status":"active","version":"3.31.0","language":"javascript","source_language":"en","source_url":"https://github.com/igordanchenko/yet-another-react-lightbox","tags":["javascript","react","image","photo","lightbox","react lightbox","react image lightbox","react photo lightbox","typescript"],"install":[{"cmd":"npm install yet-another-react-lightbox","lang":"bash","label":"npm"},{"cmd":"yarn add yet-another-react-lightbox","lang":"bash","label":"yarn"},{"cmd":"pnpm add yet-another-react-lightbox","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core React library, essential for component rendering.","package":"react","optional":false},{"reason":"Required for rendering React components to the DOM.","package":"react-dom","optional":false},{"reason":"TypeScript type definitions for React.","package":"@types/react","optional":true},{"reason":"TypeScript type definitions for React DOM.","package":"@types/react-dom","optional":true}],"imports":[{"note":"The library primarily uses ES Module syntax. Using `require()` for the default export can lead to issues or require `Lightbox.default`.","wrong":"const Lightbox = require('yet-another-react-lightbox');","symbol":"Lightbox","correct":"import Lightbox from 'yet-another-react-lightbox';"},{"note":"This import is essential for the lightbox's default styling. Without it, the component will render unstyled.","symbol":"Lightbox styles","correct":"import 'yet-another-react-lightbox/styles.css';"},{"note":"Plugins like Zoom are modular and need to be imported from their specific paths, often with their own CSS. They are then passed to the `plugins` prop of the `Lightbox` component. Importing from the main package root for plugins is incorrect.","wrong":"import { Zoom } from 'yet-another-react-lightbox';","symbol":"Zoom plugin","correct":"import Zoom from 'yet-another-react-lightbox/plugins/zoom';\nimport 'yet-another-react-lightbox/plugins/zoom.css';"}],"quickstart":{"code":"import * as React from 'react';\nimport Lightbox from 'yet-another-react-lightbox';\nimport 'yet-another-react-lightbox/styles.css';\n\nexport default function App() {\n  const [open, setOpen] = React.useState(false);\n\n  return (\n    <>\n      <button type=\"button\" onClick={() => setOpen(true)}>\n        Open Lightbox\n      </button>\n\n      <Lightbox\n        open={open}\n        close={() => setOpen(false)}\n        slides={[\n          { src: '/image1.jpg' },\n          { src: '/image2.jpg' },\n          { src: '/image3.jpg' },\n        ]}\n      />\n    </>\n  );\n}","lang":"typescript","description":"This example demonstrates the minimal setup for Yet Another React Lightbox, showing how to open and close the lightbox and provide a basic array of image slides."},"warnings":[{"fix":"Add `import 'yet-another-react-lightbox/styles.css';` to your entry file or a component where the Lightbox is used.","message":"The base styles for the lightbox are not automatically included. You must explicitly import `yet-another-react-lightbox/styles.css` for the component to render with its intended appearance.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Import desired plugins (e.g., `import Zoom from 'yet-another-react-lightbox/plugins/zoom';`) and include them in the `plugins={[Zoom]}` array prop of the Lightbox component. Remember to also import any associated plugin CSS (e.g., `import 'yet-another-react-lightbox/plugins/zoom.css';`).","message":"Advanced features like image zoom, video support, captions, and thumbnails are implemented as separate plugins. These are not included by default to keep the core library lean and must be imported and added to the `plugins` prop of the `Lightbox` component.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure your project's `react` and `react-dom` peer dependencies are updated to `^16.8.0` or newer.","message":"Yet Another React Lightbox is built on React Hooks and requires React version 16.8.0 or newer. Using it with older React versions will result in runtime errors related to missing hooks.","severity":"gotcha","affected_versions":"<16.8.0"},{"fix":"For each image slide, provide `width`, `height`, and an array of `srcSet` objects containing different resolutions: `slides={[{ src: '/image.jpg', width: 1200, height: 800, srcSet: [{ src: '/image_sm.jpg', width: 320 }] }]}`.","message":"While the basic `slides` array with just `src` works, the library strongly recommends providing `srcset` and `sizes` attributes for responsive images. This ensures optimal performance and user experience by allowing the browser to choose the most appropriate image resolution.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Review the full v3 changelog on GitHub. Ensure `slides` and `index` are treated as stable array references (e.g., using `useState` or `useMemo`). Adjust animation settings if custom easing was previously applied.","message":"Version 3 introduced minor breaking changes. Key changes included `slides` and `index` props being updatable (previously might have required workarounds), and animation easing settings moved to `animation` prop. While migration is generally trivial, review the v3 release notes if upgrading from v2.","severity":"breaking","affected_versions":">=3.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure you have `import Lightbox from 'yet-another-react-lightbox';` at the top of your file.","cause":"The Lightbox component was not imported or was imported incorrectly.","error":"ReferenceError: Lightbox is not defined"},{"fix":"Add `import 'yet-another-react-lightbox/styles.css';` to your application's entry point or the component file where the Lightbox is used.","cause":"The required CSS stylesheet for the lightbox was not imported.","error":"Lightbox opens but images are not centered, background is white, or navigation arrows are missing/unstyled."},{"fix":"Upgrade your `react` and `react-dom` packages to version `^16.8.0` or newer in your `package.json` and reinstall dependencies.","cause":"Your React project is using a version older than 16.8.0, which does not support React Hooks.","error":"TypeError: Cannot read properties of undefined (reading 'useState') or similar errors related to Hooks."},{"fix":"Plugins must be imported from their specific paths, e.g., `import Zoom from 'yet-another-react-lightbox/plugins/zoom';`.","cause":"Attempting to import a plugin (like Zoom) directly from the main `yet-another-react-lightbox` package.","error":"Property 'Zoom' does not exist on type 'typeof import(\"yet-another-react-lightbox\")'."}],"ecosystem":"npm"}