react-image-grid-gallery

React Image Grid Gallery

A simple, easy-to-use, and responsive image gallery component for displaying a grid of images in React apps.

Installation

NPM:

npm install react-image-grid-gallery

Yarn:

yarn add react-image-grid-gallery

PNPM:

pnpm add react-image-grid-gallery

Usage

import ImageGallery from "react-image-grid-gallery";

const imagesArray = [
  {
    alt: "Image1's alt text",
    caption: "Image1's description",
    src: "http://example.com/image1.jpg",
  },
  {
    alt: "Image2's alt text",
    caption: "Image2's description",
    src: "http://example.com/image2.png",
  },
  {
    alt: "Image3's alt text",
    caption: "Image3's description",
    src: "http://example.com/image3.webp",
  },
];

function Home() {
  return <ImageGallery imgArray={imagesArray} columnWidth={230} gapSize={24} />;
}

Required Props

Props	Type	Default	Description
imgArray	array	undefined	Required. An array of objects containing the following properties: alt: The image's alternative text. Required. caption: The image's description. Optional. src: The image's URL. Required.
columnWidth	number	230	Optional. The minimum width of the gallery's columns.
gapSize	number	24	Optional. The gallery's gap size.

Changelog

0.9.3 (2023-05-31)

🧱 Dependency

• Move fslightbox-react and uniqid to dependencies field (eec267b)