nellysbr / 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

This section shows how to install the React Image Grid Gallery package.

Using npm

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

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
      imagesInfoArray={imagesArray}
      columnWidth={230}
      gapSize={24}
    />
  );
}

Required Props

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

Note for Remix Users

Remix users should add "react-image-grid-gallery" to their remix.config.js file:

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  ignoredRouteFiles: ["**/.*"],
+ serverDependenciesToBundle: ["react-image-grid-gallery"],
  serverModuleFormat: "cjs",
};

The serverDependenciesToBundle field tells Remix to transpile and include the "react-image-grid-gallery" package in the server bundle.

Note for NextJS users

NextJS users should declare the "use client" directive at the top of their file. It should sit above all other import statements like so:

+ "use client";
import { ImageGallery } from "react-image-grid-gallery";
import { YouTubePlaylist } from "@codesweetly/react-youtube-playlist";

The "use client" directive tells NextJS to consider all modules imported into the page as part of the Client Component module graph.

The ImageGallery package works only as a Client Component because it uses React's State and Lifecycle effects, such as useState() and useEffect().

Build

npm run build

Dependencies

• fslightbox-react
• prop-types
• react

YouTube Demo

React Image Grid Gallery Demo