Introduction

React Grid Gallery

Justified image gallery component for React (opens in a new tab) inspired by Google Photos (opens in a new tab).

Installation

Using npm (opens in a new tab):

npm install --save react-grid-gallery

Quick Start

import { Gallery } from "react-grid-gallery";
 
const images = [
   {
      src: "https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_b.jpg",
      width: 320,
      height: 174,
      isSelected: true,
      caption: "After Rain (Jeshu John - designerspics.com)",
   },
   {
      src: "https://c2.staticflickr.com/9/8356/28897120681_3b2c0f43e0_b.jpg",
      width: 320,
      height: 212,
      tags: [
         { value: "Ocean", title: "Ocean" },
         { value: "People", title: "People" },
      ],
      alt: "Boats (Jeshu John - designerspics.com)",
   },
   {
      src: "https://c4.staticflickr.com/9/8887/28897124891_98c4fdd82b_b.jpg",
      width: 320,
      height: 212,
   },
];
 
<Gallery images={images} />

Documentation

The latest version of the documentation is available on the GitHub repository (opens in a new tab).