{"id":13422000,"url":"https://github.com/igordanchenko/yet-another-react-lightbox","last_synced_at":"2025-05-14T00:04:55.479Z","repository":{"id":44335901,"uuid":"493838825","full_name":"igordanchenko/yet-another-react-lightbox","owner":"igordanchenko","description":"Modern React lightbox component","archived":false,"fork":false,"pushed_at":"2025-05-11T23:49:44.000Z","size":2577,"stargazers_count":990,"open_issues_count":1,"forks_count":39,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-05-12T00:26:44.511Z","etag":null,"topics":["image","image-carousel","image-lightbox","lightbox","lightbox-component","lightbox-image","react","react-lightbox","reactjs"],"latest_commit_sha":null,"homepage":"https://yet-another-react-lightbox.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/igordanchenko.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-05-18T22:05:16.000Z","updated_at":"2025-05-11T23:49:47.000Z","dependencies_parsed_at":"2023-10-05T02:46:29.806Z","dependency_job_id":"c138a43c-c769-45dc-ab45-b99bec616eff","html_url":"https://github.com/igordanchenko/yet-another-react-lightbox","commit_stats":{"total_commits":429,"total_committers":8,"mean_commits":53.625,"dds":0.01631701631701632,"last_synced_commit":"c52fabe666db8222b25d0d3f60745cdbbf1715bf"},"previous_names":[],"tags_count":137,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/igordanchenko%2Fyet-another-react-lightbox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/igordanchenko%2Fyet-another-react-lightbox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/igordanchenko%2Fyet-another-react-lightbox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/igordanchenko%2Fyet-another-react-lightbox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/igordanchenko","download_url":"https://codeload.github.com/igordanchenko/yet-another-react-lightbox/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253814973,"owners_count":21968560,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["image","image-carousel","image-lightbox","lightbox","lightbox-component","lightbox-image","react","react-lightbox","reactjs"],"created_at":"2024-07-30T23:00:35.306Z","updated_at":"2025-05-14T00:04:55.452Z","avatar_url":"https://github.com/igordanchenko.png","language":"TypeScript","readme":"# Yet Another React Lightbox\n\nModern React lightbox component. Performant, easy to use, customizable and\nextendable.\n\n## Overview\n\n[![NPM Version](https://img.shields.io/npm/v/yet-another-react-lightbox.svg?color=blue)](https://www.npmjs.com/package/yet-another-react-lightbox)\n[![Bundle Size](https://img.shields.io/bundlephobia/minzip/yet-another-react-lightbox.svg?color=blue)](https://bundlephobia.com/package/yet-another-react-lightbox)\n[![License MIT](https://img.shields.io/npm/l/yet-another-react-lightbox.svg?color=blue)](https://github.com/igordanchenko/yet-another-react-lightbox/blob/main/LICENSE)\n\n- **Built for React:** works with React 18, 17 and 16.8.0+\n- **UX:** supports keyboard, mouse, touchpad and touchscreen navigation\n- **Preloading:** never displays partially downloaded images\n- **Performance:** preloads limited 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- **Video:** video slides are supported via an optional plugin\n- **Zoom:** image zoom is supported via an optional plugin\n- **Customization:** customize any UI element or add your own custom slides\n- **No bloat:** never bundle rarely used features; add optional features via\n  plugins\n- **TypeScript:** type definitions come built-in in the package\n- **RTL:** compatible with RTL layout\n\n![Yet Another React Lightbox | Example](https://images.yet-another-react-lightbox.com/example.jpg)\n\n## Documentation\n\n[https://yet-another-react-lightbox.com/documentation](https://yet-another-react-lightbox.com/documentation)\n\n## Examples\n\n[https://yet-another-react-lightbox.com/examples](https://yet-another-react-lightbox.com/examples)\n\n## Changelog\n\n[https://github.com/igordanchenko/yet-another-react-lightbox/releases](https://github.com/igordanchenko/yet-another-react-lightbox/releases)\n\n## Installation\n\n```shell\nnpm install yet-another-react-lightbox\n```\n\n## Minimal Setup Example\n\n```jsx\nimport * 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    \u003c\u003e\n      \u003cbutton type=\"button\" onClick={() =\u003e setOpen(true)}\u003e\n        Open Lightbox\n      \u003c/button\u003e\n\n      \u003cLightbox\n        open={open}\n        close={() =\u003e setOpen(false)}\n        slides={[\n          { src: \"/image1.jpg\" },\n          { src: \"/image2.jpg\" },\n          { src: \"/image3.jpg\" },\n        ]}\n      /\u003e\n    \u003c/\u003e\n  );\n}\n```\n\n## Recommended Setup\n\nUnlike many other lightbox libraries, Yet Another React Lightbox is not limited\nto just two images per slide (\"thumbnail\" and \"original\" / \"full size\").\nInstead, we favor responsive images with automatic resolution switching and\nrecommend you provide multiple files of different resolutions for each image\nslide. Yet Another React Lightbox automatically populates `srcset` / `sizes`\nattributes and lets the user's browser decide which image is more appropriate\nfor its viewport size.\n\n```jsx\nimport * 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    \u003c\u003e\n      \u003cbutton type=\"button\" onClick={() =\u003e setOpen(true)}\u003e\n        Open Lightbox\n      \u003c/button\u003e\n\n      \u003cLightbox\n        open={open}\n        close={() =\u003e setOpen(false)}\n        slides={[\n          {\n            src: \"/image1x3840.jpg\",\n            alt: \"image 1\",\n            width: 3840,\n            height: 2560,\n            srcSet: [\n              { src: \"/image1x320.jpg\", width: 320, height: 213 },\n              { src: \"/image1x640.jpg\", width: 640, height: 427 },\n              { src: \"/image1x1200.jpg\", width: 1200, height: 800 },\n              { src: \"/image1x2048.jpg\", width: 2048, height: 1365 },\n              { src: \"/image1x3840.jpg\", width: 3840, height: 2560 },\n            ],\n          },\n          // ...\n        ]}\n      /\u003e\n    \u003c/\u003e\n  );\n}\n```\n\nYou can also integrate 3rd-party image components (e.g., Next.js Image or Gatsby\nImage) via a custom render function. See\n[examples](https://yet-another-react-lightbox.com/examples) on the documentation\nwebsite.\n\n## Plugins\n\nYet Another React Lightbox allows you to add optional features to your project\nbased on your requirements via plugins.\n\nThe following plugins are bundled in the package:\n\n- [Captions](https://yet-another-react-lightbox.com/plugins/captions) - adds\n  support for slide title and description\n- [Counter](https://yet-another-react-lightbox.com/plugins/counter) - adds\n  slides counter\n- [Download](https://yet-another-react-lightbox.com/plugins/download) - adds\n  download button\n- [Fullscreen](https://yet-another-react-lightbox.com/plugins/fullscreen) - adds\n  support for fullscreen mode\n- [Inline](https://yet-another-react-lightbox.com/plugins/inline) - transforms\n  the lightbox into an image carousel\n- [Share](https://yet-another-react-lightbox.com/plugins/share) - adds sharing\n  button\n- [Slideshow](https://yet-another-react-lightbox.com/plugins/slideshow) - adds\n  slideshow button\n- [Thumbnails](https://yet-another-react-lightbox.com/plugins/thumbnails) - adds\n  thumbnails track\n- [Video](https://yet-another-react-lightbox.com/plugins/video) - adds support\n  for video slides\n- [Zoom](https://yet-another-react-lightbox.com/plugins/zoom) - adds image zoom\n  feature\n\n## License\n\nMIT © 2022 [Igor Danchenko](https://github.com/igordanchenko)\n","funding_links":[],"categories":["UI Components","react","reactjs"],"sub_categories":["Photo / Image"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Figordanchenko%2Fyet-another-react-lightbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Figordanchenko%2Fyet-another-react-lightbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Figordanchenko%2Fyet-another-react-lightbox/lists"}