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

Using npm:

npm install react-image-grid-gallery

Using yarn:

yarn add react-image-grid-gallery

Using 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={300} gapSize={7} />;
}

Required Props

Props	Description
imgArray	Required. The imgArray prop is an array of objects containing the following properties: alt: Required. The image's alternative text. caption: Optional. A description of the image. src: Required. The URL of the image.
columnWidth	Optional. The columnWidth prop is a number specifying the minimum width of the gallery's columns. 230 is the default value.
gapSize	Optional. The gapSize prop is a number specifying the gallery gap's size. 24 is the default value.

Changelog

0.9.0 (2023-05-30)

🐛 Bug Fix

• Use github readme as homepage (5cb07b4)

💅 Styling and Formatting

• Use mansory grid layout format for the image gallery (55697e3)

🚀 New Feature

• Give users the option to specify gallery's gap size (b42efe4)
• Provide users the option to specify gallery's column width (c54eaa4)