# yet-another-react-lightbox: a React lightbox built around plugins and srcset

> Yet Another React Lightbox is a TypeScript component for image galleries in React that takes a different approach from the usual two-image lightbox, recommending responsive images with automatic resolution switching and a srcset. Optional features live in plugins, and the package ships with a bundle size budget.

**igordanchenko/yet-another-react-lightbox** — Modern React lightbox component

- Repository: https://github.com/igordanchenko/yet-another-react-lightbox
- Website: https://yet-another-react-lightbox.com
- Stars: 1,329 · Forks: 52
- Language: TypeScript
- License: MIT
- Published: 2026-10-19 · Updated: 2026-10-19 · Language: en
- Canonical page: https://hysenlabs.com/projects/igordanchenko-yet-another-react-lightbox

## A lightbox that assumes responsive images

Yet Another React Lightbox is a modern React lightbox component, described as performant, easy to use, customizable and extendable. It is written in TypeScript, published to npm as yet-another-react-lightbox, and MIT licensed.

The compatibility surface is broad: it works with React 19, 18, 17 and 16.8.0 and later, and it ships its own type definitions with the package, so there is no separate types package to install. It is also compatible with RTL layout, which is the kind of detail that only matters if your application is in a right-to-left language, and then it matters a great deal.

The design decision that separates this library from most of its competitors is stated in the recommended setup section, and it is about the data model rather than about the interface. Unlike many other lightbox libraries, it is not limited to just two images per slide, a thumbnail and an original or full size. Instead it favours responsive images with automatic resolution switching, and it recommends that you provide multiple files of different resolutions for each image slide.

The component then populates the srcset and sizes attributes and lets the user's browser decide which image is appropriate for its viewport. That is a meaningfully different design from the two-image model, and it is the reason the library treats a slide as a set of renditions rather than as a single source with an optional thumbnail.

## Installing it and the smallest possible lightbox

Installation is a single npm command:

```shell
npm install yet-another-react-lightbox
```

The minimal setup shows the whole API surface, which is small:

```jsx
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" },
        ]}
      />
    </>
  );
}
```

Three props carry the component: open controls whether the lightbox is visible, close is the callback that hides it, and slides is the array of slide objects. The stylesheet is imported separately, which is the convention for a component library that does not want to inject global styles on import.

The controlled open and close pattern is the usual React idiom, and it means the parent decides when the lightbox is up, which is what you want if the gallery lives in a route or a modal of your own.

The navigation support is broad: keyboard, mouse, touchpad and touchscreen. The preloading behaviour is described as never displaying partially downloaded images, and the performance claim is that it preloads a limited number of images without compromising performance or user experience. In other words, the library will fetch ahead of the current slide so that navigation feels instant, but it will not queue the entire gallery.

## The recommended slide shape, with a srcset per image

The recommended setup is where the library's opinion shows, and it is worth reading even if you do not adopt it.

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

Each slide carries the largest rendition as src, an alt text, the intrinsic width and height so the browser can reserve the right amount of space before the image loads, and a srcSet array of the smaller renditions with their own dimensions. The library turns that into the srcset and sizes attributes the browser expects.

The intrinsic width and height are not decoration. They are what stops the layout jumping when an image arrives, and they are what allows the browser to pick a rendition before the CSS is even applied.

If your images are already managed by a framework, the library does not insist on doing the work itself. You can integrate third-party image components, Next.js Image or Gatsby Image for example, via a custom render function, and the examples section of the documentation site covers it.

## Ten plugins, each importable on its own

The plugin system is the other half of the design, and the stated principle is no bloat: rarely used features are never bundled, and optional features are added via plugins.

Ten plugins ship in the package. Captions adds support for slide title and description. Counter adds a slides counter. Download adds a download button. Fullscreen adds fullscreen mode. Inline transforms the lightbox into an image carousel. Share adds a sharing button. Slideshow adds a slideshow button. Thumbnails adds a thumbnails track. Video adds support for video slides. Zoom adds the image zoom feature.

The package exports map is what makes this work, and it is worth looking at because it shows the granularity. The root export is the default lightbox, and there is a ./core export, a ./plugins export for the plugin index, and then a separate export path per plugin, ./plugins/captions, ./plugins/counter, ./plugins/download, ./plugins/fullscreen, ./plugins/inline, ./plugins/share and the rest, each with its own types and default entry point. A consumer who wants captions and nothing else imports two paths and nothing else reaches the bundle.

That granularity is also why the bundle size badge in the README is dynamic, pointing at a JSON endpoint that reads the published package's bundle size from the npm registry, and why there is a .size-limit.json file in the repository. A library that promises to stay small is only credible if it measures itself, and the badge is that measurement published on the front page.

## The build, the tests and the release machinery

The repository is a well-automated TypeScript package, and the configuration files tell the story.

The build is Rollup, with rollup.config.js at the root, and there is a fixup-dist.js script whose name tells you it post-processes the distribution output. The package is an ES module, with module pointing at dist/index.js and types at dist/index.d.ts, and the version field in package.json is 0.0.0-semantic-release, which is the convention for a package whose version is written by the release tool rather than by hand.

The release tool is semantic-release, configured in .releaserc.json, and the commit conventions are enforced by .commitlintrc.json with husky and .lintstagedrc.json running the checks on commit. Formatting is Prettier with .prettierrc.json, linting is eslint with eslint.config.js, and dependency updates are handled by renovate.json.

Testing is Vitest, configured in vitest.config.ts, with a test/ directory, and there is a dev/ directory for the development playground. TypeScript configuration is in tsconfig.json.

The remaining files are the ones every serious repository has and few projects bother with: CONTRIBUTING.md, CODE_OF_CONDUCT.md and SECURITY.md. The security policy is worth a glance if you are integrating the component into a site that displays user-uploaded content, since a lightbox is a component that handles URLs you did not author.

## Maintenance state and where the documentation lives

The project is not archived and the last push was on 2026-10-12. The release history shows v3.32.0 on 2026-05-01, v3.32.1 on 2026-07-08 and v3.32.2 on 2026-07-30, with a changelog kept on GitHub releases and a CHANGELOG.md in the repository root.

The pattern is a mature 3.x line with patch releases on a roughly monthly cadence, which is a reasonable rhythm for a component library whose breaking changes are rare and whose feature additions are incremental.

The documentation is split across three places and each covers something different. The documentation site at yet-another-react-lightbox.com/documentation holds the reference material, the examples site at the same domain holds runnable examples including the third-party image component integration, and the plugin pages document each of the ten plugins individually under the /plugins path. The README itself stays short by design, with an overview, the installation command, two setup examples, the plugin list and the sponsors block.

That structure matters for a component library, because the README cannot be the reference. A lightbox has enough options that a single page of documentation would be unusable, so the reference lives on the site and the README only tells you what the library believes in.

The project is sponsored through GitHub Sponsors, and the licence line names the author, MIT © 2022 Igor Danchenko, with the author field in the package manifest pointing at the same person and the funding field at the sponsors page.

## Conclusion

Adopt yet-another-react-lightbox if you are in React and want a lightbox that handles responsive image sources properly and lets you pay only for the plugins you use. Do not adopt it if your gallery is built around a single high resolution original, because the recommended setup expects several renditions per image and the component is built around that shape. Before you start, decide which plugins you need, because the exports map exposes each one separately and importing them individually is what keeps the bundle small, and check the .size-limit.json budget so a later dependency bump does not quietly push you over it.

## FAQ

### How do I install yet-another-react-lightbox and show a lightbox?

Run npm install yet-another-react-lightbox, import Lightbox from "yet-another-react-lightbox" and the stylesheet from "yet-another-react-lightbox/styles.css", then render the component with open, close and slides props. The slides array takes objects with a src, and optionally alt, width, height and a srcSet of renditions.

### Why does the library recommend multiple images per slide?

Unlike many other lightbox libraries it is not limited to two images per slide, a thumbnail and an original. It favours responsive images with automatic resolution switching, so you provide multiple files of different resolutions and it populates the srcset and sizes attributes and lets the browser choose for the viewport.

### Which plugins ship with yet-another-react-lightbox?

Captions, Counter, Download, Fullscreen, Inline, Share, Slideshow, Thumbnails, Video and Zoom. Each has its own export path in the package, such as yet-another-react-lightbox/plugins/captions, so unused plugins do not end up in your bundle.

### Can I use Next.js Image or Gatsby Image inside the lightbox?

Yes. Third-party image components can be integrated via a custom render function, and the examples section of the documentation site covers the setup for both.

### Which React versions are supported?

React 19, 18, 17 and 16.8.0 and later, with type definitions included in the package. The library is also compatible with RTL layout, and the releases on the 3.x line are v3.32.0 from 2026-05-01, v3.32.1 from 2026-07-08 and v3.32.2 from 2026-07-30.

## Sources

- [igordanchenko/yet-another-react-lightbox on GitHub](https://github.com/igordanchenko/yet-another-react-lightbox)
- [License: MIT](https://github.com/igordanchenko/yet-another-react-lightbox/blob/main/LICENSE)
- [Project website](https://yet-another-react-lightbox.com)
- [README](https://github.com/igordanchenko/yet-another-react-lightbox/blob/main/README.md)
- [Releases](https://github.com/igordanchenko/yet-another-react-lightbox/releases)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/igordanchenko-yet-another-react-lightbox