React PhotoSwipe

PhotoSwipe, PhotoSwipeGallery component for ReactJS base on PhotoSwipe.

Installation

$3

``bash
npm install --save react-photoswipe
`

$3


`bash
bower install --save react-photoswipe
`

Usage

$3

#### With webpack:

`js
import 'react-photoswipe/lib/photoswipe.css';
`

#### Without webpack:

`html

`

$3

#### PhotoSwipe

`js
import {PhotoSwipe} from 'react-photoswipe';

let isOpen = true;

let items = [
{
src: 'http://lorempixel.com/1200/900/sports/1',
w: 1200,
h: 900,
title: 'Image 1'
},
{
src: 'http://lorempixel.com/1200/900/sports/2',
w: 1200,
h: 900,
title: 'Image 2'
}
];

let options = {
//http://photoswipe.com/documentation/options.html
};

handleClose = () => {
isOpen: false
};

`

#### PhotoSwipeGallery

`js
import {PhotoSwipeGallery} from 'react-photoswipe';

let items = [
{
src: 'http://lorempixel.com/1200/900/sports/1',
thumbnail: 'http://lorempixel.com/120/90/sports/1',
w: 1200,
h: 900,
title: 'Image 1'
},
{
src: 'http://lorempixel.com/1200/900/sports/2',
thumbnail: 'http://lorempixel.com/120/90/sports/2',
w: 1200,
h: 900,
title: 'Image 2'
}
];

let options = {
//http://photoswipe.com/documentation/options.html
};

getThumbnailContent = (item) => {
return (

);
}


`

$3

`html


`

`js
var PhotoSwipe = window.ReactPhotoswipe.PhotoSwipe;
var PhotoSwipeGallery = window.ReactPhotoswipe.PhotoSwipeGallery;
`

Example here

Props

Note: The first argument of every listener is a Photoswipe instance.

EX:
`js
beforeChange(instance, change);
imageLoadComplete(instance, index, item);
`

$3

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| isOpen | bool | false | true | |
| items | array | [] | true | http://photoswipe.com/documentation/getting-started.html |
| options | object | {} | false | http://photoswipe.com/documentation/options.html |
| onClose | function | | false | Callback after PhotoSwipe close |
| id | string | | false | |
| className | string | pswp | |
| beforeChange | function | | false | Photoswipe event listener |
| afterChange | function | | false | Photoswipe event listener |
| imageLoadComplete | function | | false | Photoswipe event listener |
| resize | function | | false | Photoswipe event listener |
| gettingData | function | | false | Photoswipe event listener |
| mouseUsed | function | | false | Photoswipe event listener |
| initialZoomIn | function | | false | Photoswipe event listener |
| initialZoomInEnd | function | | false | Photoswipe event listener |
| initialZoomOut | function | | false | Photoswipe event listener |
| initialZoomOutEnd | function | | false | Photoswipe event listener |
| parseVerticalMargin | function | | false | Photoswipe event listener |
| close | function | | false | Photoswipe event listener |
| unbindEvents | function | | false | Photoswipe event listener |
| destroy | function | | false | Photoswipe event listener |
| updateScrollOffset | function | | false | Photoswipe event listener |
| preventDragEvent | function | | false | Photoswipe event listener |
| shareLinkClick | function | | false | Photoswipe event listener |

$3

| Name | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| items | array | [] | true | http://photoswipe.com/documentation/getting-started.html |
| options | object | {} | false | http://photoswipe.com/documentation/options.html |
| thumbnailContent | function | | false | Thumbnail content |
| isOpen | bool | false | false | Use it with onClose prop |
| onClose | function | | false | Callback after close |
| id | string | | false | |
| className | string | pswp-gallery` | |
| beforeChange | function | | false | Photoswipe event listener |
| afterChange | function | | false | Photoswipe event listener |
| imageLoadComplete | function | | false | Photoswipe event listener |
| resize | function | | false | Photoswipe event listener |
| gettingData | function | | false | Photoswipe event listener |
| mouseUsed | function | | false | Photoswipe event listener |
| initialZoomIn | function | | false | Photoswipe event listener |
| initialZoomInEnd | function | | false | Photoswipe event listener |
| initialZoomOut | function | | false | Photoswipe event listener |
| initialZoomOutEnd | function | | false | Photoswipe event listener |
| parseVerticalMargin | function | | false | Photoswipe event listener |
| close | function | | false | Photoswipe event listener |
| unbindEvents | function | | false | Photoswipe event listener |
| destroy | function | | false | Photoswipe event listener |
| updateScrollOffset | function | | false | Photoswipe event listener |
| preventDragEvent | function | | false | Photoswipe event listener |
| shareLinkClick | function | | false | Photoswipe event listener |

Demo

View demo or example folder.