# react-view-photo-gallery

> A react library helpful render photos in awesome gallery.

Latest version **1.2.1** (published 2022-08-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-view-photo-gallery
pnpm add react-view-photo-gallery
yarn add react-view-photo-gallery
bun add react-view-photo-gallery
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.1 |
| Published | 2022-08-26 |
| First published | 2022-01-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 31.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Trong Hieu |
| Maintainers | tronghieu60s |
| Keywords | react, react-component, image-gallery, photo-gallery, react-photo-gallery, react-view-photo-gallery, react-view-photo-gallery-library, react-image-gallery, react-view-image-gallery, react-view-image-gallery-library |

## Links

- npm: https://www.npmjs.com/package/react-view-photo-gallery
- Repository: https://github.com/tronghieu60s/react-view-photo-gallery
- Homepage: https://github.com/tronghieu60s/react-view-photo-gallery#readme
- Issues: https://github.com/tronghieu60s/react-view-photo-gallery/issues
- npm.io page: https://npm.io/package/react-view-photo-gallery

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^17.0.2
- [react-dom](https://npm.io/package/react-dom.md) ^17.0.2

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.2.1 (latest) — 2022-08-26
- 1.2.0 — 2022-08-26
- 1.1.2 — 2022-01-23
- 1.1.1 — 2022-01-23
- 1.1.0 — 2022-01-23
- 1.0.0 — 2022-01-20

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

## License

MIT

## Contributing

Pull requests and stars are highly welcome.

For bugs and feature requests, please create an issue.

---
_Source: https://npm.io/package/react-view-photo-gallery · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._