Tim Ellenberger

React | GraphQL | Consulting

react-spring-lightbox

GitHubMasonry Lightbox Gallery
badgebadgebadgebadge

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).

README.md

README.md

Windows 10 Dark Mode Setting

Windows 10 Dark Mode Setting

macOS Mojave Dark Mode Setting

macOS Mojave Dark Mode Setting

Android 9.0 Dark Mode Setting

Android 9.0 Dark Mode Setting

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

README.md

README.md

Windows 10 Dark Mode Setting

Windows 10 Dark Mode Setting

macOS Mojave Dark Mode Setting

macOS Mojave Dark Mode Setting

Android 9.0 Dark Mode Setting

Android 9.0 Dark Mode Setting

Installation

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

Terminalbash
1yarn add react-spring-lightbox styled-components

Basic Usage

componentsLightbox.jsjsx
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;
Edit Post

Bug?Edit Post