Flexible Gallery Lightbox Component For React – spring-lightbox

Description:

A flexible and mobile-first gallery lightbox component for React apps, giving us native-feeling touch gestures and buttery smooth animations.

We’ll make use of the excellent react-spring library, which will enable us to hook into native spring animation performance and consistency across all platforms from a single codebase.

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-*

Basic Usage:

1. Installation.

# Yarn
$ yarn add react-spring-lightbox
# NPM
$ npm i react-spring-lightbox

2. Import the lightbox component.

import React, { useState } from 'react';
import Lightbox, { ImagesListType } from 'react-spring-lightbox';

3. Define a list of images to be displayed in this galley lightbox.

const images: ImagesListType = [
  {
    src: '1.jpg',
    loading: 'lazy', // loading attribute
    alt: 'Desc 1',
  },
  {
    src: '2.jpg',
    loading: 'lazy', 
    alt: 'Desc 2',
  },
  {
    src: '3.jpg',
    loading: 'lazy',
    alt: 'Desc 3',
  },
  // ...
];

4. Create a gallery lightbox component in your app.

const myLightbox = () => {
  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}
      />
  );
};
export default myLightbox;

5. All component props.

/** classnames are applied to the root lightbox component */
className?: string;
/** Index of image in images array that is currently shown */
currentIndex: number;
/** Array of images to be shown in Lightbox, each image object may contain any valid 'img' attribute with the exceptions of 'draggable', 'onClick', 'onDragStart' and 'ref' */
images: ImagesList;
/** Flag that dictates if the lightbox is open or closed */
isOpen: boolean;
/** Function that closes the Lightbox */
onClose: () => void;
/** Function that changes currentIndex to next image in images */
onNext: () => void;
/** Function that changes currentIndex to previous image in images */
onPrev: () => void;
/** React-Spring useTransition config for page open/close animation */
pageTransitionConfig?: any;
/** A React component that renders below the image pager */
renderFooter?: () => React.ReactNode;
/** A React component that renders above the image pager */
renderHeader?: () => React.ReactNode;
/** A React component that renders inside the image stage, useful for making overlays over the image */
renderImageOverlay?: () => React.ReactNode;
/** A React component that is used for next button in image pager */
renderNextButton?: () => React.ReactNode;
/** A React component that is used for previous button in image pager */
renderPrevButton?: () => React.ReactNode;
/** Overrides the default behavior of double clicking causing an image zoom to a single click */
singleClickToZoom?: boolean;
/** Inline styles that are applied to the root lightbox component */
style?: React.CSSProperties;

Preview: