React-Photo-Gallery

react-thumb-photo-gallery solve two problems:

1. first display image thumbs

2. view original picture after click the thumb image

Online Demo

Usage

1. PhotoGallery

import PhotoGallery from 'react-thumb-photo-gallery'

<PhotoGallery photos={photos} margin={6} radius={4} />

2. PhotoThumbs

import { PhotoThumbs } from 'react-thumb-photo-gallery'

<PhotoThumbs photos={photos} margin={6} radius={4} />

PhotoThumbs only handle thumbs without photoswipe integration, so it has smaller package size.

What this package did

PhotoViewer is based on photoswipe. First is solve image original size, photoswipe only works with correct width and height of images. Unfortunately, we always don't have the image original size.

Second is layout style, thumb have margin between others, and there wrapper cannot take more space.

Components

1. PhotoGallery/PhotoThumbs

Props

| Prop Name | Type | Default | Description | | --------- | ----------------- | --------- | -------------------------------------- | | photos | Array[string] | [] | Image data set | | size | Number | 64 | Thumbnail image size | | width | Number | undefined | Thumbnail image width | | height | Number | undefined | Thumbnail image height | | direction | 'row' | 'column' | 'row' | Thumbnail Direction | | margin | Number | undefined | Thumbnail margin | | srcPrefix | String | undefined | Add prefix string for each photo src | | imagePlaceholder | String | undefined | default image for gallery item | | itemClass | String | undefined | add class for gallery item | | radius | String | undefined | quick set image border-radius, such as 4 or '4px' | | expandAnimate | boolean | undefined | only for PhotoGallery, make preview animation start from thumb position |

2. PhotoViewer

PhotoViewer is just the wrapper of photoswip for react

import { PhotoViewer } from 'react-thumb-photo-gallery'

Props

| Prop Name | Type | Default | Description | | --------- | ------------------ | --------- | --------------------------------------- | | items | Array[{src, w, h}] | undefined | Image data set | | options | Object | {} | Props reference photos props: Link |