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

Changelog

2.0.0 (2024-01-03)

⚠ BREAKING CHANGES

• Rename imagesArray prop to imagesInfoArray
• Rename imgArray prop to imagesArray
• Users must now use named importation to add the package to their apps.

Named importation provides better compatibility with node and babel-like tools.

Ref: https://esbuild.github.io/content-types/#default-interop

🧱 Dependency

• Bump @types/react (2515713)
• Bump packages (3340792)
• Configure script for building es modules and commonjs compilations (14a6251)
• Configure script for building es modules compilations (390e63a)
• Configure typescript as the package's compiler (3738a8e)
• Delete the copy-files script (6da1df0)
• Specify items typescript should compile (280f7d1)
• Uninstall babel packages (f1f9e8f)

🏠 Chores

• Define package's entry point (45f3c19)
• Delete babel configuration (846a6cf)
• Provide url and email for raising issues and reporting bugs (7d0319c)
• Specify additional ignore rules (4659bde)
• Specify files to publish to npm (b05e3d1)
• Specify package's declaration file (b8d634d)

📝 Documentation

• Add headers to installation section (d0c444b)
• Update readme (1946f5c)

🐛 Bug Fix

• Resolve crypto.randomUUID is not a function jest error (d3196a2)

🔄️ Code Refactoring

• Add test section to changelog (cc924ff)
• Change imagegallery's export mode from default to named exportation (d38624c)
• Convert commitlint configuration file to typescript (b4bbe51)
• Move css rulesets into imagegallerystyles file (4529b1e)
• Move interface into types file (24c2f9e)
• Rename imagesArray prop to imagesInfoArray (753fc2a)
• Rename imgArray prop to imagesArray (2b7f611)
• Rename imgElementArray to imageElementsArray (a975321)
• Replace uniqid with crypto.randomuuid (06bd0ee)
• Use release-it's default publish path (2a5be4a)

💅 Styling and Formatting

• Delete stylesheet (f61ef5d)
• Move the gallery container's rulesets into the imagegallerystyles class (db209e5)
• Show figcaption on hover (16b3708)
• Use inline css styling technique (d2951ca)

🧪 Code Testing

• Configure jest as the package's testing tool (89fcdc3)
• Confirm that the image gallery renders correctly (671c90d)
• Convert jest configuration file to typescript (3845d9c)
• Rename imgArray prop to imagesArray (3d5839d)