Live example here

GitHub

---

Examples

const pictures = [
  {
    src: "https://media.tenor.com/images/916c85aa24280f510de1e985ad718267/tenor.gif",         // string
    thumbnail: "https://media.tenor.com/images/916c85aa24280f510de1e985ad718267/tenor.gif",   // string
    title: "Border Collie",           // string or number
    alt: "l0l @ this p00ch!",         // string or number
    description: "Doggy dog",         // string or number
    timestamp: 'july 4, 1776',        // valid date - will be converted using new Date()
    height: '100px',                  // string - any valid CSS
    width: '100px',                   // string - any valid CSS
    tags: ['funny', 'humor', 'l0l'],  // array of strings or numbers
    ...anyOtherValues                 // all values will be returned when using onClick()
  }
];
const handleClick = picture => console.log(picture);
<Gallery
  galleryStyle={galleryStyle}
  pictureMargin="10px"
  pictures={pictures}
  onClick={handleClick}
  tagSearch
  titleSearch
  dateRange
  picturesPerPage={[10, 25, 50, 100]}
/>

---

Pictures Options

Key	Type	Required	Options/Action
src	String	No	Any valid link to a picture
thumbnail	String	Yes	Any valid link to a picture
title	String	No	Required when titleSearch is enabled
alt	String	No
description	String	No
timestamp	Date	No	Required when dateRange is enabled
height	CSS	No	Any valid CSS value for height (default is 150px)
width	CSS	No	Any valid CSS value for width (default is 150px)
tags	Array	No	Array of Strings (required when tagSearch is enabled)

---

Gallery Options

Key	Type	Required	Options/Action
galleryStyle	JSX CSS	No	Any valid JSX CSS for the gallery
pictureMargin	CSS	No	Any valid CSS value for margin
pictures	Object	Yes	Pictures to be displayed
onClick	Function	No	Function will receive all values of selected picture object
tagSearch	Boolean	No	Enable/disable tag searching functionality
titleSearch	Boolean	No	Enable/disable title searching functionality
dateRange	Boolean	No	Enable/disable date range filtering functionality
picturesPerPage	Array	No	Array of numbers (default is [5, 10, 25, 50])

---

Notes:

• anyOtherValues can be an object of any values that would be needed for the handleClick function