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.

Live Demo and Tutorial

Available at: https://codesweetly.com/react-image-grid-gallery

Installation

NPM:

npm install react-image-grid-gallery --save

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 App() {
  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.

YouTube Demo

React Image Grid Gallery Demo