A React wrapper around the Photoswipe, which helps you create configurable and flexible galleries in your app.

Basic usage:

1. Install and import the component.

# Yarn
$ yarn add react-photoswipe-gallery

# NPM
$ npm i react-photoswipe-gallery

import 'photoswipe/dist/photoswipe.css'
import { Gallery, Item } from 'react-photoswipe-gallery'

2. Create a basic gallery.

const MyGallery = () => (
  <Gallery>
    <Item
      original="1.jpg"
      thumbnail="https://reactscript.com/gallery-photoswipe/thumb-1.jpg"
      width="1024"
      height="768"
    >
      {({ ref, open }) => (
        <img ref={ref} onClick={open} src="https://reactscript.com/gallery-photoswipe/thumb-1.jpg" />
      )}
    </Item>
    <Item
      original="2.jpg"
      thumbnail="thumb-2.jpg"
      width="1024"
      height="768"
    >
      {({ ref, open }) => (
        <img ref={ref} onClick={open} src="thumb-2.jpg" />
      )}
    </Item>
  </Gallery>
)

Preview:

Download Details:

Author: dromru

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/dromru/react-photoswipe-gallery

License: MIT