Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/igordanchenko/yet-another-react-lightbox
Modern React lightbox component
https://github.com/igordanchenko/yet-another-react-lightbox
image image-carousel image-lightbox lightbox lightbox-component lightbox-image react react-lightbox reactjs
Last synced: about 1 month ago
JSON representation
Modern React lightbox component
- Host: GitHub
- URL: https://github.com/igordanchenko/yet-another-react-lightbox
- Owner: igordanchenko
- License: mit
- Created: 2022-05-18T22:05:16.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-26T21:25:45.000Z (about 1 month ago)
- Last Synced: 2024-07-26T22:54:13.141Z (about 1 month ago)
- Topics: image, image-carousel, image-lightbox, lightbox, lightbox-component, lightbox-image, react, react-lightbox, reactjs
- Language: TypeScript
- Homepage: https://yet-another-react-lightbox.com
- Size: 2.37 MB
- Stars: 777
- Watchers: 3
- Forks: 35
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
- awesome-react-components - yet-another-react-lightbox - [demo](https://yet-another-react-lightbox.com/examples) - [docs](https://yet-another-react-lightbox.com/documentation) - React lightbox component. (UI Components / Photo / Image)
- fucking-awesome-react-components - yet-another-react-lightbox - 🌎 [demo](yet-another-react-lightbox.com/examples) - 🌎 [docs](yet-another-react-lightbox.com/documentation) - React lightbox component. (UI Components / Photo / Image)
README
# Yet Another React Lightbox
Modern React lightbox component. Performant, easy to use, customizable and
extendable.## Overview
[![NPM Version](https://img.shields.io/npm/v/yet-another-react-lightbox.svg?color=blue)](https://www.npmjs.com/package/yet-another-react-lightbox)
[![Bundle Size](https://img.shields.io/bundlephobia/minzip/yet-another-react-lightbox.svg?color=blue)](https://bundlephobia.com/package/yet-another-react-lightbox)
[![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)- **Built for React:** works with React 18, 17 and 16.8.0+
- **UX:** supports keyboard, mouse, touchpad and touchscreen navigation
- **Preloading:** never displays partially downloaded images
- **Performance:** preloads limited number of images without compromising
performance or UX
- **Responsive:** responsive images with automatic resolution switching are
supported out of the box
- **Video:** video slides are supported via an optional plugin
- **Zoom:** image zoom is supported via an optional plugin
- **Customization:** customize any UI element or add your own custom slides
- **No bloat:** never bundle rarely used features; add optional features via
plugins
- **TypeScript:** type definitions come built-in in the package
- **RTL:** compatible with RTL layout![Yet Another React Lightbox | Example](https://yet-another-react-lightbox.com/images/example.jpg)
## Documentation
[https://yet-another-react-lightbox.com/documentation](https://yet-another-react-lightbox.com/documentation)
## Examples
[https://yet-another-react-lightbox.com/examples](https://yet-another-react-lightbox.com/examples)
## Changelog
[https://github.com/igordanchenko/yet-another-react-lightbox/releases](https://github.com/igordanchenko/yet-another-react-lightbox/releases)
## Installation
```shell
npm install yet-another-react-lightbox
```## Minimal Setup Example
```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 (
<>
setOpen(true)}>
Open Lightbox
setOpen(false)}
slides={[
{ src: "/image1.jpg" },
{ src: "/image2.jpg" },
{ src: "/image3.jpg" },
]}
/>
>
);
}
```## Recommended Setup
Unlike many other lightbox libraries, Yet Another React Lightbox is not limited
to just two images per slide ("thumbnail" and "original" / "full size").
Instead, we favor responsive images with automatic resolution switching and
recommend you provide multiple files of different resolutions for each image
slide. Yet Another React Lightbox automatically populates `srcset` / `sizes`
attributes and lets the user's browser decide which image is more appropriate
for its viewport size.```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 (
<>
setOpen(true)}>
Open Lightbox
setOpen(false)}
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 },
],
},
// ...
]}
/>
>
);
}
```You can also integrate 3rd-party image components (e.g., Next.js Image or Gatsby
Image) via a custom render function. See
[examples](https://yet-another-react-lightbox.com/examples) on the documentation
website.## Plugins
Yet Another React Lightbox allows you to add optional features to your project
based on your requirements via plugins.The following plugins are bundled in the package:
- [Captions](https://yet-another-react-lightbox.com/plugins/captions) - adds
support for slide title and description
- [Counter](https://yet-another-react-lightbox.com/plugins/counter) - adds
slides counter
- [Download](https://yet-another-react-lightbox.com/plugins/download) - adds
download button
- [Fullscreen](https://yet-another-react-lightbox.com/plugins/fullscreen) - adds
support for fullscreen mode
- [Inline](https://yet-another-react-lightbox.com/plugins/inline) - transforms
the lightbox into an image carousel
- [Share](https://yet-another-react-lightbox.com/plugins/share) - adds sharing
button
- [Slideshow](https://yet-another-react-lightbox.com/plugins/slideshow) - adds
slideshow button
- [Thumbnails](https://yet-another-react-lightbox.com/plugins/thumbnails) - adds
thumbnails track
- [Video](https://yet-another-react-lightbox.com/plugins/video) - adds support
for video slides
- [Zoom](https://yet-another-react-lightbox.com/plugins/zoom) - adds image zoom
feature## License
MIT © 2022 [Igor Danchenko](https://github.com/igordanchenko)