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

    5.1.4 • Public • Published

    React Image Lightbox

    NPM Build Status Coverage Status

    RIL Snapshot

    A flexible lightbox component for displaying images in a React project.

    DEMO

    Features

    • Keyboard shortcuts (with rate limiting)
    • Image Zoom
    • Flexible rendering using src values assigned on the fly
    • Image preloading for smoother viewing
    • Mobile friendly, with pinch to zoom and swipe (Thanks, @webcarrot!)

    Example

    import React, { Component } from 'react';
    import Lightbox from 'react-image-lightbox';
    import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
    
    const images = [
      '//placekitten.com/1500/500',
      '//placekitten.com/4000/3000',
      '//placekitten.com/800/1200',
      '//placekitten.com/1500/1500',
    ];
    
    export default class LightboxExample extends Component {
      constructor(props) {
        super(props);
    
        this.state = {
          photoIndex: 0,
          isOpen: false,
        };
      }
    
      render() {
        const { photoIndex, isOpen } = this.state;
    
        return (
          <div>
            <button type="button" onClick={() => this.setState({ isOpen: true })}>
              Open Lightbox
            </button>
    
            {isOpen && (
              <Lightbox
                mainSrc={images[photoIndex]}
                nextSrc={images[(photoIndex + 1) % images.length]}
                prevSrc={images[(photoIndex + images.length - 1) % images.length]}
                onCloseRequest={() => this.setState({ isOpen: false })}
                onMovePrevRequest={() =>
                  this.setState({
                    photoIndex: (photoIndex + images.length - 1) % images.length,
                  })
                }
                onMoveNextRequest={() =>
                  this.setState({
                    photoIndex: (photoIndex + 1) % images.length,
                  })
                }
              />
            )}
          </div>
        );
      }
    }

    Play with the code on the example on CodeSandbox

    Options

    Property Type Description
    mainSrc
    (required)
    string Main display image url
    prevSrc string Previous display image url (displayed to the left). If left undefined, onMovePrevRequest will not be called, and the button not displayed
    nextSrc string Next display image url (displayed to the right). If left undefined, onMoveNextRequest will not be called, and the button not displayed
    mainSrcThumbnail string Thumbnail image url corresponding to props.mainSrc. Displayed as a placeholder while the full-sized image loads.
    prevSrcThumbnail string Thumbnail image url corresponding to props.prevSrc. Displayed as a placeholder while the full-sized image loads.
    nextSrcThumbnail string Thumbnail image url corresponding to props.nextSrc. Displayed as a placeholder while the full-sized image loads.
    onCloseRequest
    (required)
    func Close window event. Should change the parent state such that the lightbox is not rendered
    onMovePrevRequest func Move to previous image event. Should change the parent state such that props.prevSrc becomes props.mainSrc, props.mainSrc becomes props.nextSrc, etc.
    onMoveNextRequest func Move to next image event. Should change the parent state such that props.nextSrc becomes props.mainSrc, props.mainSrc becomes props.prevSrc, etc.
    onImageLoad func Called when an image loads.
    (imageSrc: string, srcType: string, image: object): void
    onImageLoadError func Called when an image fails to load.
    (imageSrc: string, srcType: string, errorEvent: object): void
    imageLoadErrorMessage node What is rendered in place of an image if it fails to load. Centered in the lightbox viewport. Defaults to the string "This image failed to load".
    onAfterOpen func Called after the modal has rendered.
    discourageDownloads bool When true, enables download discouragement (preventing [right-click -> Save Image As...]). Defaults to false.
    animationDisabled bool When true, image sliding animations are disabled. Defaults to false.
    animationOnKeyInput bool When true, sliding animations are enabled on actions performed with keyboard shortcuts. Defaults to false.
    animationDuration number Animation duration (ms). Defaults to 300.
    keyRepeatLimit number Required interval of time (ms) between key actions (prevents excessively fast navigation of images). Defaults to 180.
    keyRepeatKeyupBonus number Amount of time (ms) restored after each keyup (makes rapid key presses slightly faster than holding down the key to navigate images). Defaults to 40.
    imageTitle node Image title (Descriptive element above image)
    imageCaption node Image caption (Descriptive element below image)
    imageCrossOrigin string crossorigin attribute to append to img elements (MDN documentation)
    toolbarButtons node[] Array of custom toolbar buttons
    reactModalStyle Object Set z-index style, etc., for the parent react-modal (react-modal style format)
    reactModalProps Object Override props set on react-modal (https://github.com/reactjs/react-modal)
    imagePadding number Padding (px) between the edge of the window and the lightbox. Defaults to 10.
    clickOutsideToClose bool When true, clicks outside of the image close the lightbox. Defaults to true.
    enableZoom bool Set to false to disable zoom functionality and hide zoom buttons. Defaults to true.
    wrapperClassName string Class name which will be applied to root element after React Modal
    nextLabel string aria-label and title set on the 'Next' button. Defaults to 'Next image'.
    prevLabel string aria-label and title set on the 'Previous' button. Defaults to 'Previous image'.
    zoomInLabel string aria-label and title set on the 'Zoom In' button. Defaults to 'Zoom in'.
    zoomOutLabel string aria-label and title set on the 'Zoom Out' button. Defaults to 'Zoom out'.
    closeLabel string aria-label and title set on the 'Close Lightbox' button. Defaults to 'Close lightbox'.
    loader node Custom Loading indicator for loading

    Browser Compatibility

    Browser Works?
    Chrome Yes
    Firefox Yes
    Safari Yes
    IE 11 Yes

    Contributing

    After cloning the repository and running npm install inside, you can use the following commands to develop and build the project.

    # Starts a webpack dev server that hosts a demo page with the lightbox.
    # It uses react-hot-loader so changes are reflected on save.
    npm start
    
    # Lints the code with eslint and my custom rules.
    yarn run lint
    
    # Lints and builds the code, placing the result in the dist directory.
    # This build is necessary to reflect changes if you're
    #  `npm link`-ed to this repository from another local project.
    yarn run build

    Pull requests are welcome!

    License

    MIT

    Install

    npm i react-image-lightbox

    DownloadsWeekly Downloads

    110,885

    Version

    5.1.4

    License

    MIT

    Unpacked Size

    3.99 MB

    Total Files

    26

    Last publish

    Collaborators

    • wuweiweiwu
    • fritz-c