node package manager
Stop writing boring code. Discover, share, and reuse within your team. Create a free org »

react-photoswipe

React PhotoSwipe

PhotoSwipe, PhotoSwipeGallery component for ReactJS base on PhotoSwipe.

Installation

NPM

npm install --save react-photoswipe

Bower

bower install --save react-photoswipe

Usage

Styles

With webpack:

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

Without webpack:

<link rel="stylesheet" type="text/css" href="path/to/react-photoswipe/lib/photoswipe.css">

JS

PhotoSwipe

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
};
 
<PhotoSwipe isOpen={isOpen} items={items} options={options} onClose={handleClose}/>
 

PhotoSwipeGallery

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 (
    <img src={item.thumbnail} width={120} height={90}/>
  );
}
 
<PhotoSwipeGallery items={items} options={options} thumbnailContent={getThumbnailContent}/>

UMD

<link rel="stylesheet" type="text/css" href="path/to/react-photoswipe/dist/photoswipe.css">
<script src="path/to/react-photoswipe/dist/react-photoswipe.js"></script>
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:

beforeChange(instance, change);
imageLoadComplete(instance, index, item);

PhotoSwipe

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

PhotoSwipeGallery

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 <img src={item.src} width='100' height='100'/> 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.