React Component Wrapper Around PhotoSwipe

React Component Wrapper Around PhotoSwipe

react-photoswipe-gallery A configurable and flexible React component wrapper around PhotoSwipe.

A configurable and flexible React component wrapper around PhotoSwipe.

Basic Usage

import 'photoswipe/dist/photoswipe.css'
import 'photoswipe/dist/default-skin/default-skin.css'

import { Gallery, Item } from 'react-photoswipe-gallery'

const MyGallery = () => (
  <Gallery>
    <Item
      original="https://placekitten.com/1024/768?image=1"
      thumbnail="https://placekitten.com/80/60?image=1"
      width="1024"
      height="768"
    >
      {({ ref, open }) => (
        <img ref={ref} onClick={open} src="https://placekitten.com/80/60?image=1" />
      )}
    </Item>
    <Item
      original="https://placekitten.com/1024/768?image=2"
      thumbnail="https://placekitten.com/80/60?image=2"
      width="1024"
      height="768"
    >
      {({ ref, open }) => (
        <img ref={ref} onClick={open} src="https://placekitten.com/80/60?image=2" />
      )}
    </Item>
  </Gallery>
)

<Gallery /> component ships with default PhotoSwipeUI and Layout. Such a setup is suitable for most cases. If you want more control, jump to advanced usage example.

Demo

Check out storybook with source code examples.

Installation

yarn add photoswipe react-photoswipe-gallery

or

npm install photoswipe react-photoswipe-gallery --save

Advanced Usage

If you want to customize PhotoSwipe layout or use your PhotoSwipe UI, you should take <CustomGallery /> component.

We also provide configurable <DefaultLayout />. It's suitable for most cases, and provide props for configuring all captions and removing unneeded UI elements.

Also, if you have more than one gallery instance in your view, we recommend reusing <Layout /> between several <CustomGallery />.

import PhotoswipeUIDefault from 'photoswipe/dist/photoswipe-ui-default'
import { CustomGallery, Item, DefaultLayout } from 'react-photoswipe-gallery'

const MyGallery = () => {
  const layoutRef = useRef()

  return (
    <CustomGallery layoutRef={layoutRef} ui={PhotoswipeUIDefault}>
      {/*...*/}
    </CustomGallery>

    <CustomGallery layoutRef={layoutRef} ui={PhotoswipeUIDefault}>
      {/*...*/}
    </CustomGallery>

    <DefaultLayout
      shareButton={false}
      fullscreenButton={false}
      zoomButton={false}
      ref={layoutRef}
    />
  )
}

Hash Navigation

You should pass a unique id prop to <Gallery /> or <CustomGallery /> component, to enable hash navigation.

Optionally, you can also pass the id to <Item /> component. Otherwise, the index will be used.

const MyGallery = () => {
  <Gallery id="my-gallery">
    <Item
      id="first-pic"
      {/*...*/}
    />
    <Item
      id="second-pic"
      {/*...*/}
    />
  </Gallery>
}

Props

You can pass any of DefaultLayout props to Gallery.

Prop Type Required Description
id Number or String ✓ (for hash navigation) Item ID, for hash navigation
options Object PhotoSwipe options
onOpen Function Triggers after PhotoSwipe.init() call. Use it for accessing PhotoSwipe API. It will receive PhotoSwipe instance as the first argument: (photoswipe: PhotoSwipe) => void

Item

Should be children of the Gallery.

Prop Type Required Description
children Function Render prop for exposing Gallery API
original String Url of original image
thumbnail String Url of thumbnail
width Number or String Width of original image
height Number or String Height of original image
title String Title for Default UI
html String Html content, if you need to use it as modal
id Number or String Item ID, for hash navigation
Note about Item's children render prop.

Item accepts only function as children.

type RenderItem = (props: {
  /**
   * Required `ref` object to any html node of item
   *
   * Can be omitted if there is only one item in the gallery
   */
  ref: React.MutableRefObject;

  /**
   * Function that opens the gallery at the current item's index
   */
  open: () => void;
}) => JSX.Element

<Item>
  {({ ref, open }) => (
    <img ref={ref} onClick={open} />
  ) as RenderItem}
</Item>

<Item>
  {({ ref, open }) => (
    <
  ) as RenderItem}
</Item>

CustomGallery

Prop Type Required Description
layoutRef React.MutableRefObject Ref to your layout element
ui PhotoSwipeUI PhotoSwipe UI class
id Number or String ✓ (for hash navigation) Item ID, for hash navigation
options Object PhotoSwipe options
onOpen Function Triggers after PhotoSwipe.init() call. Use it for accessing PhotoSwipe API. It will receive PhotoSwipe instance as the first argument: (photoswipe: PhotoSwipe) => void

DefaultLayout

All props are optional.

Prop Type Default Description
closeButtonCaption Object 'Close (Esc)' .pswp__button--close caption
shareButtonCaption Object 'Share' .pswp__button--share caption
toggleFullscreenButtonCaption Object 'Toggle fullscreen' .pswp__button--fs caption
zoomButtonCaption Object 'Zoom in/out' .pswp__button--zoom caption
prevButtonCaption Object 'Previous (arrow left)' .pswp__button--arrow--left caption
nextButtonCaption Object 'Next (arrow right)' .pswp__button--arrow--right caption
shareButton Boolean true Show .pswp__button--share
fullscreenButton Boolean true Show .pswp__button--fs
zoomButton Boolean true Show .pswp__button--zoom

Hooks

useGallery

The useGallery hook returns an object with some useful methods.

Property Type Description
open (index: number) => void This function allows programmatically open Photoswipe UI at index

Requirements

Development

yarn install
yarn pnpify --sdk

then

yarn storybook

or

yarn start

Download Details:

Author: dromru

Demo: https://dromru.github.io/react-photoswipe-gallery/

Source Code: https://github.com/dromru/react-photoswipe-gallery

react reactjs javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Increase Performance of React Applications Via Array JavaScript Methods

Increase Performance of React Applications Via Array JavaScript Methods. We will create a simple event management application in the react to add, update, and delete an event.

Routing in React without React-Router

I have been using React JS in my projects for quite some time now and am used to managing routing in my app using the react-router package. I have always been keen on having as little dependencies in my apps as possible, so, I always felt perturbed by the use of this particular package in simpler apps which did not have complex routes.

The Ugly Side of React Hooks

In this post, I will share my own point of view about React Hooks, and as the title of this post implies, I am not a big fan.

ReactJS: The Javascript Developer’s Guide

This article will walk you through the concepts you would need to know to step into the world of widely used ReactJS.