Configurable And Flexible Gallery Component Based On PhotoSwipe

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="thumb-1.jpg"
      width="1024"
      height="768"
    >
      {({ ref, open }) => (
        <img ref={ref} onClick={open} src="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:

Configurable And Flexible Gallery Component Based On PhotoSwipe

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

You Might Be Interested In:

Add Comment