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

A react library helpful render photos in awesome gallery. 📷
https://github.com/tronghieu60s/react-view-photo-gallery

photo-gallery react react-library

Last synced: 6 days ago
JSON representation

A react library helpful render photos in awesome gallery. 📷

• Host: GitHub
• URL: https://github.com/tronghieu60s/react-view-photo-gallery
• Owner: tronghieu60s
• License: mit
• Created: 2021-08-08T00:45:45.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2022-08-26T02:48:44.000Z (over 2 years ago)
• Last Synced: 2024-12-09T18:45:38.438Z (about 1 month ago)
• Topics: photo-gallery, react, react-library
• Language: TypeScript
• Homepage: https://tronghieu60s.github.io/react-view-photo-gallery/
• Size: 4.26 MB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
## What is this?

📸 A react library helpful render photos in awesome gallery.

## Preview

![Demo React-View-Photo-Gallery](https://i.imgur.com/GEii94Y.png)

## Installation

Using yarn:

```bash

$ yarn add react-view-photo-gallery

```

Using npm:

```bash

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

```

## Demo

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

## Usage

```js

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 (

    <>

       setShow(true)}>Show

       setShow(false)} images={images} />

    >

  );

}

```

## Methods

| Props          | Type                   | Description                                     |

| -------------- | ---------------------- | ----------------------------------------------- |

| show           | (required) string      | Attribute show/hide ``          |

| onClose        | (required) Function    | This function will make hide `` |

| 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                          |

## License

MIT

## Contributing

Pull requests and stars are highly welcome.

For bugs and feature requests, please create an issue.