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