Notwithstanding Precautions, Misadventure

    TypeScript icon, indicating that this package has built-in type declarations

    1.7.0 • Public • Published


    npm NPM npm bundle size PRs Welcome Travis (.org)

    React-spring-lightbox is a flexible image gallery lightbox with native-feeling touch gestures and buttery smooth animations.

    Docs     Codesandbox


    • ☝️    Mousewheel, swipe or click+drag to page photos
    • ⌨️  Keyboard controls Esc
    • 🐁  Ctrl + Mousewheel or Trackpad Pinch to 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 including loading (lazy loading), srcset and aria-*


    yarn add react-spring-lightbox


    The 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: '',
            loading: 'lazy',
            alt: 'Windows 10 Dark Mode Setting',
            src: '',
            loading: 'lazy',
            alt: 'macOS Mojave Dark Mode Setting',
            src: '',
            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 (
                /* 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

    Local Development

    Clone the repo

    git clone react-spring-lightbox
    cd react-spring-lightbox

    Setup symlinks

    yarn link
    cd example
    yarn link react-spring-lightbox

    Run the library in development mode

    yarn start

    Run the example app in development mode

    cd example
    yarn dev

    Changes to the library code should hot reload in the demo app


    MIT © Tim Ellenberger


    npm i react-spring-lightbox

    DownloadsWeekly Downloads






    Unpacked Size

    166 kB

    Total Files


    Last publish


    • tim-soft