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.