Skip to main content


Installation & Usage

This section provides instructions on how to install and use the react-visual-grid package. The package can be installed using npm, yarn, or pnpm. Here are the commands for installation:

npm install --save react-visual-grid
yarn add react-visual-grid
pnpm add react-visual-grid

Building a Simple Grid

Let's start by creating a simple image grid that contains 30 images. To generate the grid, we will use the Lorem Picsum service, which produces random images. Here is an example code snippet in App.js:

import { Grid } from "react-visual-grid";
import "react-visual-grid/dist/react-visual-grid.css";

const images = Array.from({ length: 30 }, (_, index) => ({
src: `${index + 1}/800/600`
alt: `Image ${index + 1}`,

return (

Please note that the Grid component uses the VERTICAL layout as the default rendering mode. You can change this by passing the gridLayout prop to the Grid component. Additionally, it is mandatory to pass the width and height props to the Grid, as the library uses these values to render the optimal number of thumbnails.

Images Array

As shown in the example above, the images are passed to the Grid component as an array. Each image object in the array comes with a set of properties:

srcURL of the imagestring
altAlt text for the imagestring
widthWidth of the imagenumber100
heightHeight of the imagenumber100
idUnique ID of the imagestring
onClickCallback to be executed on clickFunction

Please note that only the src and alt properties are mandatory, as the rest of the properties are used for internal purposes and can be safely ignored.