react-spring-lightbox

badgebadgebadgebadge

react-spring-particles 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
  • 🔎Double-tap or 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={} and renderNextButton={} 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

Installation

This library is built with hooks and requires React >= 16.8.0

Terminalbash
1yarn add react-spring-lightbox

Basic Usage

componentsLightbox.jsjsx
1import React, { useState } from 'react';2import Lightbox from 'react-spring-lightbox';34const 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];2122const CoolLightbox = () => {23  const [currentImageIndex, setCurrentIndex] = useState(0);2425  const gotoPrevious = () =>26    currentImageIndex > 0 && setCurrentIndex(currentImageIndex - 1);2728  const gotoNext = () =>29    currentImageIndex + 1 < images.length &&30    setCurrentIndex(currentImageIndex + 1);3132  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 />)}4445      /* Add styling */46      // className="cool-class"47      // style={{ background: "grey" }}4849      /* Handle closing */50      // onClose={handleClose}5152      /* react-spring config for open/close animation */53      // pageTransitionConfig={{54      //   from: { transform: "scale(0.75)", opacity: 0 },55      //   enter: { transform: "scale(1)", opacity: 1 },56      //   leave: { transform: "scale(0.75)", opacity: 0 },57      //   config: { mass: 1, tension: 320, friction: 32 }58      // }}59    />60  );61};6263export default CoolLightbox;

Edit Post

Bug?Edit Post