šŸš€ Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
Book a DemoInstallSign in
Socket

react-image-grid-gallery

Package Overview
Dependencies
Maintainers
0
Versions
20
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-image-grid-gallery

A simple image gallery with lightbox for displaying a grid of images in React apps

3.1.2
latest
Source
npm
Version published
Weekly downloads
123
-47.21%
Maintainers
0
Weekly downloads
Ā 
Created
Source

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

npm NPM

Features

  • SEO friendly
  • Fullscreen support
  • Keyboard accessible
  • Mobile responsive
  • Lightbox with translucent background
  • Thumbnails
  • Image captions
  • Lazy loading support
  • Set column numbers dynamically or manually
  • Resolution switching compatible
  • Customizable styles

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 = [
  {
    id: "uniqueid111",
    alt: "Image1's alt text",
    caption: "Image1's description",
    src: "http://example.com/image1.jpg",
  },
  {
    id: "uniqueid222",
    alt: "Image2's alt text",
    caption: "Image2's description",
    src: "http://example.com/image2.png",
    thumbSrc: "http://example.com/image2_640.png",
  },
  {
    id: "uniqueid333",
    alt: "Image3's alt text",
    caption: "Image3's description",
    src: "http://example.com/image3.webp?w=2400",
    gridSrc: "http://example.com/image3.webp?w=1280",
    thumbSrc: "http://example.com/image3.webp?w=640",
    srcSet:
      "http://example.com/image3.webp?w=2400 2400w, http://example.com/image3.webp?w=1280 1280w, http://example.com/image3.webp?w=640 640w",
    mediaSizes: "(max-width: 640px) 640w, (max-width: 1024px) 1280w, 2400px",
  },
];

function App() {
  return <ImageGallery imagesInfoArray={imagesArray} gapSize={24} />;
}

Props

PropsTypeDefaultDescription
imagesInfoArrayarrayundefined

(Required) An array of objects containing the following properties:

  • id: (Required - string or number) Each image's unique identifying key.
  • alt: (Required - string) The image's alternative text.
  • caption: (Optional - string) The image's description.
  • src: (Required - string) The image's default URL.
  • gridSrc: (Optional - string) The preferred grid image's URL.
  • thumbSrc: (Optional - string) The preferred thumbnail image's URL.
  • srcSet: (Optional - string) The set of images' URLs and sizes for resolution switching.
  • mediaSizes: (Optional - string) The media conditions and image sizes that hint the browser on the specific srcSet to display when a media condition is true.

columnCount

number or keyword (string)"auto"(Optional) The number of columns.

columnWidth

number or keyword (string)230(Optional) The minimum width of the gallery's columns.

gapSize

number24(Optional) The gallery's gap size.
fixedCaptionbooleanfalse

(Optional) Specify whether to display the image captions permanently (true) or to hide them by default and ease them in on mouse hover (false).

thumbnailBorderstring"3px solid #fff"(Optional) The thumbnail's border style.
lazybooleantrue(Optional) Specify whether to lazy load images.
lazyFromIndexnumber6

(Optional) The image's index to begin the grid's lazy loading.

tip: Use a negative number to lazy load all the images.

customStylesImageGalleryStylesType{}

(Optional) Custom styles to override the following element's default styles:

  • Gallery container: galleryContainerStyle
  • Gallery image button: imageBtnStyle
  • Gallery image container: imageContainerStyle
  • Gallery image element: imageStyle
  • Gallery image caption: imageCaptionStyle
  • Modal container: modalContainerStyle
  • Modal slide number: modalSlideNumberStyle
  • Modal toolbar: modalToolbarStyle
  • Modal toolbar button: modalToolbarBtnStyle
  • Modal slideshow section: modalSlideShowSectionStyle
  • Modal thumbnail section: modalThumbnailSectionStyle
  • Modal thumbnail images container: modalThumbImgsPodStyle
  • Modal image element: modalImageStyle
  • Modal slide button: modalSlideBtnStyle

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

Note for Docusaurus users

Did you get a ReferenceError: crypto is not defined error during the build step? If so, this note is for you.

Wrap the ImageGallery component in <BrowserOnly> if you get a ReferenceError: crypto is not defined error during your build step.

import BrowserOnly from "@docusaurus/BrowserOnly";

function YourComponent() {
  return (
    <BrowserOnly fallback={<div>Loading...</div>}>
      {() => {
        const ImageGallery = require("react-image-grid-gallery").ImageGallery;
        return (
          <ImageGallery
            imagesInfoArray={imagesArray}
            columnCount={"auto"}
            columnWidth={230}
            gapSize={24}
          />
        );
      }}
    </BrowserOnly>
  );
}

This process is essential if your imagesArray uses the Web Crypto API. The <BrowserOnly> component tells Docusaurus to render the ImageGallery library only in the browser. It ensures that the Crypto API runs only in CSR (Client-Side Rendering) rather than during build or SSR (Server-Side Rendering).

Build

npm run build

YouTube Demo

React Image Grid Gallery Demo

Support

šŸµ Buy me a coffee

Keywords

react

FAQs

Package last updated on 18 Feb 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts