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

    1.6.0 • Public • Published

    react-spring-lightbox

    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

    Features

    • ☝️    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-*

    Install

    yarn add react-spring-lightbox

    Usage

    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: '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;

    Props

    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 https://github.com/tim-soft/react-spring-lightbox.git 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

    License

    MIT © Tim Ellenberger

    Install

    npm i react-spring-lightbox

    DownloadsWeekly Downloads

    1,144

    Version

    1.6.0

    License

    MIT

    Unpacked Size

    158 kB

    Total Files

    21

    Last publish

    Collaborators

    • tim-soft