@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
Maintainers
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.
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:
alt
: (Required) The image's alternative text.caption
: (Optional) The image's description.src
: (Required) The image's URL.key
: (Optional) The key for the button wrapping the image.
(Optional) The number of columns.
(Optional) The minimum width of the gallery's columns.
(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