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
imgArray | array | undefined |
Required. An array of objects containing the following properties:
|
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