React-spring-lightbox is a flexible image gallery lightbox with native-feeling touch gestures and buttery smooth animations.
- ☝️
Mousewheel, swipe or click+drag to page photos - ⌨️ Keyboard controls ← → Esc
- 🐁 Ctrl +
MousewheelorTrackpad Pinchto zoom - 🔎 Double/Single-tap or double/single-click to zoom in/out
- 👌 Pinch to zoom
- 👈 Panning on zoomed-in images
- 🏁 Highly performant spring based animations via react-spring
- No external CSS
- Implement your own UI
- Supports IE 11, Edge, Safari, Chrome, Firefox and Opera
- Full typescript support
- Supports any
<img />attribute includingloading(lazy loading),srcsetandaria-*
yarn add react-spring-lightboxThe images prop now accepts a list of objects whose properties can be almost any valid React <img /> prop including srcset, loading (lazy loading) and aria-* attributes.
If you use typescript, the exact type can be imported from import { ImagesListType } from 'react-spring-lightbox';
import React, { useState } from 'react'; import Lightbox, { ImagesListType } from 'react-spring-lightbox'; const images: ImagesListType = [ { src: 'https://timellenberger.com/static/blog-content/dark-mode/win10-dark-mode.jpg', loading: 'lazy', alt: 'Windows 10 Dark Mode Setting', }, { src: 'https://timellenberger.com/static/blog-content/dark-mode/macos-dark-mode.png', loading: 'lazy', alt: 'macOS Mojave Dark Mode Setting', }, { src: 'https://timellenberger.com/static/blog-content/dark-mode/android-9-dark-mode.jpg', loading: 'lazy', alt: 'Android 9.0 Dark Mode Setting', }, ]; const CoolLightbox = () => { const [currentImageIndex, setCurrentIndex] = useState(0); const gotoPrevious = () => currentImageIndex > 0 && setCurrentIndex(currentImageIndex - 1); const gotoNext = () => currentImageIndex + 1 < images.length && setCurrentIndex(currentImageIndex + 1); return ( <Lightbox isOpen={true} onPrev={gotoPrevious} onNext={gotoNext} images={images} currentIndex={currentImageIndex} /* Add your own UI */ // renderHeader={() => (<CustomHeader />)} // renderFooter={() => (<CustomFooter />)} // renderPrevButton={() => (<CustomLeftArrowButton />)} // renderNextButton={() => (<CustomRightArrowButton />)} // renderImageOverlay={() => (<ImageOverlayComponent >)} /* Add styling */ // className="cool-class" // style={{ background: "grey" }} /* Handle closing */ // onClose={handleClose} /* Use single or double click to zoom */ // singleClickToZoom /* react-spring config for open/close animation */ // pageTransitionConfig={{ // from: { transform: "scale(0.75)", opacity: 0 }, // enter: { transform: "scale(1)", opacity: 1 }, // leave: { transform: "scale(0.75)", opacity: 0 }, // config: { mass: 1, tension: 320, friction: 32 } // }} /> ); }; export default CoolLightbox;| Prop | Description |
|---|---|
| isOpen | Flag that dictates if the lightbox is open or closed |
| onClose | Function that closes the Lightbox |
| onPrev | Function that changes currentIndex to previous image in images |
| onNext | Function that changes currentIndex to next image in images |
| currentIndex | Index of image in images array that is currently shown |
| renderHeader | A React component that renders above the image pager |
| renderFooter | A React component that renders below the image pager |
| renderPrevButton | A React component that is used for previous button in image pager |
| renderNextButton | A React component that is used for next button in image pager |
| renderImageOverlay | A React component that renders within the image stage, useful for creating UI overlays on top of the current image |
| singleClickToZoom | Overrides the default behavior of double clicking causing an image zoom to a single click |
| images | Array of image objects to be shown in Lightbox |
| className | Classes are applied to the root lightbox component |
| style | Inline styles are applied to the root lightbox component |
| pageTransitionConfig | React-Spring useTransition config for page open/close animation |
Clone the repo
git clone https://github.com/tim-soft/react-spring-lightbox.git react-spring-lightbox cd react-spring-lightboxSetup symlinks
yarn link cd example yarn link react-spring-lightboxRun the library in development mode
yarn startRun the example app in development mode
cd example yarn devChanges to the library code should hot reload in the demo app
MIT © Tim Ellenberger