https://github.com/tim-soft/react-spring-lightbox
📷 A flexible image gallery lightbox with native-feeling touch gestures and buttery smooth animations, built with react-spring.
https://github.com/tim-soft/react-spring-lightbox
gestures images lightbox react react-spring touch
Last synced: 9 months ago
JSON representation
📷 A flexible image gallery lightbox with native-feeling touch gestures and buttery smooth animations, built with react-spring.
- Host: GitHub
- URL: https://github.com/tim-soft/react-spring-lightbox
- Owner: tim-soft
- License: mit
- Created: 2019-03-25T22:28:59.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-12-01T05:50:42.000Z (about 2 years ago)
- Last Synced: 2025-03-28T10:05:55.014Z (10 months ago)
- Topics: gestures, images, lightbox, react, react-spring, touch
- Language: TypeScript
- Homepage: https://timellenberger.com/libraries/react-spring-lightbox
- Size: 2.24 MB
- Stars: 243
- Watchers: 5
- Forks: 27
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# react-spring-lightbox
[](https://www.npmjs.com/package/react-spring-lightbox)
[](https://github.com/tim-soft/react-spring-lightbox/blob/master/LICENSE)
[](https://travis-ci.org/tim-soft/react-spring-lightbox)
React-spring-lightbox is a flexible image gallery lightbox with native-feeling touch gestures and buttery smooth animations.
Docs
  Â
Codesandbox
## ✨ Features
- :point_up: Â Â Â `Mousewheel`, swipe or click+drag to page photos
- :keyboard: Â Keyboard controls ← → Esc
- :mouse2: Â Ctrl + `Mousewheel` or `Trackpad Pinch` to zoom
- :mag_right: Â Double/Single-tap or double/single-click to zoom in/out
- :ok_hand: Â Â Â Pinch to zoom
- :point_left: Â Panning on zoomed-in images
- :checkered_flag: Â Highly performant spring based animations via [react-spring](https://github.com/react-spring/react-spring)
- No external CSS
- Implement your own UI
- Supports IE 11, Edge, Safari, Chrome, Firefox and Opera
- Full typescript support
- Supports any `![]()
` attribute including `loading` (lazy loading), `srcset` and `aria-*`
## Install
```bash
yarn add react-spring-lightbox
```
## Usage
The `images` prop now accepts a list of objects whose properties can be _almost_ any valid React `![]()
` prop including `srcset`, `loading` (lazy loading) and `aria-*` attributes.
If you use typescript, the exact type can be imported from `import { ImagesListType } from 'react-spring-lightbox';`
```typescript
import React, { useState } from 'react';
import Lightbox, { ImagesListType } from 'react-spring-lightbox';
const images: ImagesListType = [
{
src: 'https://timellenberger.com/static/blog-content/dark-mode/win10-dark-mode.jpg',
loading: 'lazy',
alt: 'Windows 10 Dark Mode Setting',
},
{
src: 'https://timellenberger.com/static/blog-content/dark-mode/macos-dark-mode.png',
loading: 'lazy',
alt: 'macOS Mojave Dark Mode Setting',
},
{
src: 'https://timellenberger.com/static/blog-content/dark-mode/android-9-dark-mode.jpg',
loading: 'lazy',
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 (
()}
// renderFooter={() => ()}
// renderPrevButton={() => ()}
// renderNextButton={() => ()}
// renderImageOverlay={() => ()}
/* Add styling */
// className="cool-class"
// style={{ background: "grey" }}
/* Handle closing */
// onClose={handleClose}
/* Use single or double click to zoom */
// singleClickToZoom
/* 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 |
| renderImageOverlay | A React component that renders within the image stage, useful for creating UI overlays on top of the current image |
| singleClickToZoom | Overrides the default behavior of double clicking causing an image zoom to a single click |
| 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
```bash
git clone https://github.com/tim-soft/react-spring-lightbox.git react-spring-lightbox
cd react-spring-lightbox
```
Setup symlinks
```bash
yarn link
cd example
yarn link react-spring-lightbox
```
Run the library in development mode
```bash
yarn start
```
Run the example app in development mode
```bash
cd example
yarn dev
```
Changes to the library code should hot reload in the demo app
## License
MIT © [Tim Ellenberger](https://github.com/tim-soft)