React-view-photo-gallery NPM

What is this?

📸 A react library helpful render photos in awesome gallery.

Preview

Demo React-View-Photo-Gallery

Installation

Using yarn:

$ yarn add react-view-photo-gallery

Using npm:

$ npm install --save react-view-photo-gallery

Demo

https://tronghieu60s.github.io/react-view-photo-gallery/

Usage

import React, { useState } from 'react';
import PhotoGallery from 'react-view-photo-gallery';

export default function App() {
  const [show, setShow] = useState(false);

  const images = [
    { src: 'https://place.dog/300/200' },
    { src: 'https://place.dog/400/200', name: 'Dog Image 400x200' },
    {
      src: 'https://place.dog/400/300',
      name: 'Dog Image 400x300',
      caption: new Date().toLocaleString(),
    },
  ];

  return (
    <>
      <button onClick={() => setShow(true)}>Show</button>
      <PhotoGallery show={show} onClose={() => setShow(false)} images={images} />
    </>
  );
}

Methods

Props	Type	Description
show	(required) string	Attribute show/hide `<PhotoGallery />`
onClose	(required) Function	This function will make hide `<PhotoGallery />`
images	(required) ImageType[]	Array for images
currentIndex	(optional) number	Index of current image
openLink	(optional) string	Path open link in new tab
showName	(optional) boolean	Show name of image
showCaption	(optional) boolean	Show caption of image
showOpenLink	(optional) boolean	Show open link button
showFullScreen	(optional) boolean	Show full screen button
showSlideshow	(optional) boolean	Show slideshow button
showDownload	(optional) boolean	Show download button
showThumbnails	(optional) boolean	Show thumbnails button