react-spring-lightbox

react-spring-lightbox is a modal photo gallery that aims to replicate all of the input UX of hardware-accelerated native image applications from touch swiping to Ctrl + Mousewheel zooming.

Supported Gestures and Features

☝️Mousewheel, swipe or click+drag to page photos
⌨️Keyboard controls ← → Esc
🐁Ctrl + Mousewheel or Trackpad Pinch to zoom
🔎Single/double-tap or single/double-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

Demos

Out of the box, this library purposely does not include any UI elements (header, footer, buttons etc). With the available renderHeader={}, renderFooter={}, renderPrevButton={}, renderNextButton={} and renderImageOverlay={} props, the sky is the limit for total customization.

All that is included is the image stage which implements all gestures (press Esc to close).

Utilizing the UI props to add a custom fixed header, absolutely positioned footer and left/right arrow buttons and absolutely positioned image overlay component

Installation

This library is built with hooks and requires React >= 16.8.0 and styled-components >= 5.0.0

Terminal

1yarn add react-spring-lightbox styled-components

Basic Usage

componentsLightbox.js jsx

1import React, { useState } from 'react';2import Lightbox from 'react-spring-lightbox';3
4const images = [5  {6    src:7      'https://timellenberger.com/static/blog-content/dark-mode/win10-dark-mode.jpg',8    alt: 'Windows 10 Dark Mode Setting'9  },10  {11    src:12      'https://timellenberger.com/static/blog-content/dark-mode/macos-dark-mode.png',13    alt: 'macOS Mojave Dark Mode Setting'14  },15  {16    src:17      'https://timellenberger.com/static/blog-content/dark-mode/android-9-dark-mode.jpg',18    alt: 'Android 9.0 Dark Mode Setting'19  }20];21
22const CoolLightbox = () => {23  const [currentImageIndex, setCurrentIndex] = useState(0);24
25  const gotoPrevious = () =>26    currentImageIndex > 0 && setCurrentIndex(currentImageIndex - 1);27
28  const gotoNext = () =>29    currentImageIndex + 1 < images.length &&30    setCurrentIndex(currentImageIndex + 1);31
32  return (33    <Lightbox34      isOpen={true}35      onPrev={gotoPrevious}36      onNext={gotoNext}37      images={images}38      currentIndex={currentImageIndex}39      /* Add your own UI */40      // renderHeader={() => (<CustomHeader />)}41      // renderFooter={() => (<CustomFooter />)}42      // renderPrevButton={() => (<CustomLeftArrowButton />)}43      // renderNextButton={() => (<CustomRightArrowButton />)}44      // renderImageOverlay={() => (<ImageOverlayComponent >)}45
46      /* Add styling */47      // className="cool-class"48      // style={{ background: "grey" }}49
50      /* Handle closing */51      // onClose={handleClose}52
53      /* Use single or double click to zoom */54      // singleClickToZoom55
56      /* react-spring config for open/close animation */57      // pageTransitionConfig={{58      //   from: { transform: "scale(0.75)", opacity: 0 },59      //   enter: { transform: "scale(1)", opacity: 1 },60      //   leave: { transform: "scale(0.75)", opacity: 0 },61      //   config: { mass: 1, tension: 320, friction: 32 }62      // }}63    />64  );65};66
67export default CoolLightbox;

Tim Ellenberger

React | GraphQL | Consulting

@tim-soft

@gmail