react-pswp
v0.0.5
Published
React wrapper for PhotoSwipe
Downloads
18
Readme
🖼️🖼️🖼️ react-pswp
Flexible React wrapper for PhotoSwipe
Install
yarn add react-pswp
// or
npm install --save react-pswp
Usage
import React, { useState, useEffect } from 'react';
import { Gallery, PhotoSwipe } from 'react-pswp';
import 'react-pswp/dist/index.css';
const MyApp = () => {
const [index, setIndex] = useState(null);
const [open, setOpen] = useState(false);
const myPicture = [ /* you image set */ ]
const container = myPicture.map((picture, i) => ({
uid: i,
src: picture.original,
msrc: picture.thumbnail,
w: picture.width,
h: picture.height,
title: `Picture by ${picture.author}`,
}));
useEffect(() => {
if (!open && index !== null) setOpen(true);
}, [index]);
return (
<Gallery
container={container}
onClick={setIndex}
wrapperClass="flex flex-wrap"
itemClass="p-1 w-1/6"
imgClass="inline-block w-full"
/>
<PhotoSwipe
container={container}
onIndexChange={setIndex}
onOpenChange={setOpen}
index={index}
open={open}
theme={{
foreground: '#1A202C',
background: '#81E6D9',
}}
/>
)
}
For more information, 📗 read the interactive documentation
Contribute
First, install all dependencies:
$ yarn
$ cd ./example && yarn
To ease both module and example contributions, start the following commands in paralel.
$ yarn start
# AND
$ cd ./example && yarn start
License
MIT © Antistatique
This library is created using create-react-hook.