Registry / web-framework / yet-another-react-lightbox

yet-another-react-lightbox

library3.31.0jsnpmunverified

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.

web-framework

npm install yet-another-react-lightbox

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · YET-ANOTHER-REACT-

yet-another-react-lightbox

web-frameworkjavascriptv3.31.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Lightbox

✓ import Lightbox from 'yet-another-react-lightbox';

✗ const Lightbox = require('yet-another-react-lightbox');

The library primarily uses ES Module syntax. Using `require()` for the default export can lead to issues or require `Lightbox.default`.

Lightbox styles

✓ import 'yet-another-react-lightbox/styles.css';

This import is essential for the lightbox's default styling. Without it, the component will render unstyled.

Zoom plugin

✓ import Zoom from 'yet-another-react-lightbox/plugins/zoom'; import 'yet-another-react-lightbox/plugins/zoom.css';

✗ import { Zoom } from 'yet-another-react-lightbox';

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.

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.

import * as React from 'react'; import Lightbox from 'yet-another-react-lightbox'; import 'yet-another-react-lightbox/styles.css'; export default function App() { const [open, setOpen] = React.useState(false); 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' }, ]} /> </> ); }

Debug

Known issues

gotchaThe 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.

fix

Add `import 'yet-another-react-lightbox/styles.css';` to your entry file or a component where the Lightbox is used.

affects: >=1.0.0

gotchaAdvanced 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.

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';`).

affects: >=1.0.0

gotchaYet 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.

fix

Ensure your project's `react` and `react-dom` peer dependencies are updated to `^16.8.0` or newer.

affects: <16.8.0

gotchaWhile 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.

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 }] }]}`.

affects: >=1.0.0

breakingVersion 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.

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.

affects: >=3.0.0

Errors

Common errors & fixes

ReferenceError: Lightbox is not defined

The Lightbox component was not imported or was imported incorrectly.

fix

Ensure you have `import Lightbox from 'yet-another-react-lightbox';` at the top of your file.

Lightbox opens but images are not centered, background is white, or navigation arrows are missing/unstyled.

The required CSS stylesheet for the lightbox was not imported.

fix

Add `import 'yet-another-react-lightbox/styles.css';` to your application's entry point or the component file where the Lightbox is used.

TypeError: Cannot read properties of undefined (reading 'useState') or similar errors related to Hooks.

Your React project is using a version older than 16.8.0, which does not support React Hooks.

fix

Upgrade your `react` and `react-dom` packages to version `^16.8.0` or newer in your `package.json` and reinstall dependencies.

Property 'Zoom' does not exist on type 'typeof import("yet-another-react-lightbox")'.

Attempting to import a plugin (like Zoom) directly from the main `yet-another-react-lightbox` package.

fix

Plugins must be imported from their specific paths, e.g., `import Zoom from 'yet-another-react-lightbox/plugins/zoom';`.

Upgrade

Version history

3.31.0latest on npm

Audit

Dependencies

reactrequiredCore React library, essential for component rendering.

react-domrequiredRequired for rendering React components to the DOM.

@types/reactoptionalTypeScript type definitions for React.

@types/react-domoptionalTypeScript type definitions for React DOM.

Agent activity

21 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/igordanchenko/yet-another-react-lightbox ↗

packagehttps://www.npmjs.com/package/yet-another-react-lightbox ↗

homepagehttps://yet-another-react-lightbox.com ↗