Skip to content
📷 A flexible image gallery lightbox with native-feeling touch gestures and buttery smooth animations, built with react-spring.
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode Add library to repo Jul 31, 2019
example Update /example app styling to support a large number of images Aug 27, 2019
src Fix: use image length instead of fixed value for imageStageRefs Aug 27, 2019
.babelrc.js Add library to repo Jul 31, 2019
.editorconfig 🚀 Initial commit, setup Rollup Mar 25, 2019
.eslintignore
.eslintrc.js ⬆️ eslint@6.1.0, eslint-config-airbnb@18.0.1, eslint-plugin-react-hoo… Aug 14, 2019
.gitignore Add test suite with @jest and @testing-library Aug 7, 2019
.prettierignore 🚀 Initial commit, setup Rollup Mar 25, 2019
.prettierrc.js 🚀 Initial commit, setup Rollup Mar 25, 2019
.travis.yml
CHANGELOG.md Update CHANGELOG.md Aug 27, 2019
LICENSE 🚀 Initial commit, setup Rollup Mar 25, 2019
README.md Update README.md Sep 12, 2019
jest.config.js ⬆️ @testing-library/react@9.1.1 Aug 14, 2019
package.json v1.1.6 Aug 27, 2019
rollup.config.js Add library to repo Jul 31, 2019
yarn.lock upgrade deps Aug 27, 2019

README.md

react-spring-lightbox

npm NPM npm bundle size PRs Welcome Travis (.org)

React-spring-lightbox is a flexible image gallery lightbox with native-feeling touch gestures and buttery smooth animations.


Docs     Codesandbox

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

Install

yarn add react-spring-lightbox

Usage

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

const images = [
  {
    src:
      'https://timellenberger.com/static/blog-content/dark-mode/win10-dark-mode.jpg',
    alt: 'Windows 10 Dark Mode Setting'
  },
  {
    src:
      'https://timellenberger.com/static/blog-content/dark-mode/macos-dark-mode.png',
    alt: 'macOS Mojave Dark Mode Setting'
  },
  {
    src:
      'https://timellenberger.com/static/blog-content/dark-mode/android-9-dark-mode.jpg',
    alt: 'Android 9.0 Dark Mode Setting'
  }
];

const CoolLightbox = () => {
  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}
      /* Add your own UI */
      // renderHeader={() => (<CustomHeader />)}
      // renderFooter={() => (<CustomFooter />)}
      // renderPrevButton={() => (<CustomLeftArrowButton />)}
      // renderNextButton={() => (<CustomRightArrowButton />)}

      /* Add styling */
      // className="cool-class"
      // style={{ background: "grey" }}

      /* Handle closing */
      // onClose={handleClose}

      /* react-spring config for open/close animation */
      // pageTransitionConfig={{
      //   from: { transform: "scale(0.75)", opacity: 0 },
      //   enter: { transform: "scale(1)", opacity: 1 },
      //   leave: { transform: "scale(0.75)", opacity: 0 },
      //   config: { mass: 1, tension: 320, friction: 32 }
      // }}
    />
  );
};

export default CoolLightbox;

Props

Prop Description
isOpen Flag that dictates if the lightbox is open or closed
onClose Function that closes the Lightbox
onPrev Function that changes currentIndex to previous image in images
onNext Function that changes currentIndex to next image in images
currentIndex Index of image in images array that is currently shown
renderHeader A React component that renders above the image pager
renderFooter A React component that renders below the image pager
renderPrevButton A React component that is used for previous button in image pager
renderNextButton A React component that is used for next button in image pager
images Array of image objects to be shown in Lightbox
className Classes are applied to the root lightbox component
style Inline styles are applied to the root lightbox component
pageTransitionConfig React-Spring useTransition config for page open/close animation

Local Development

Clone the repo

git clone https://github.com/tim-soft/react-spring-lightbox.git react-spring-lightbox
cd react-spring-lightbox

Setup symlinks

yarn link
cd example
yarn link react-spring-lightbox

Run the library in development mode

yarn start

Run the example app in development mode

cd example
yarn start

Changes to the library code should hot reload in the demo app

License

MIT © Tim Ellenberger

You can’t perform that action at this time.