npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@mgiglesias/react-image-grid-gallery

v2.1.6

Published

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

Downloads

190

Readme

React Image Grid Gallery

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

npm NPM

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}
      columnCount={"auto"}
      columnWidth={230}
      gapSize={24}
    />
  );
}

Props

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

columnCount

(Optional) The number of columns.

columnWidth

(Optional) The minimum width of the gallery's columns.

gapSize

(Optional) The gallery's gap size.

captionVisible

(Optional) Wether to permanently show image captions, or have them ease in.

styles

(Optional) Styles to override default styles with (can optionally include any of: galleryContainerStyle, imageBtnStyle, imageContainerStyle, imageStyle, imageCaptionStyle, modalContainerStyle, modalSlideNumberStyle, modalToolbarStyle, modalToolbarBtnStyle, modalSlideShowSectionStyle, modalImageStyle, 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>
  );
}

The <BrowserOnly> component tells Docusaurus to render the ImageGallery library only in the browser.

Note: This process is essential because the ImageGallery package uses the Web Crypto API. Therefore, BrowserOnly 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