installation-and-usage

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:

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: `https://picsum.photos/id/${index + 1}/800/600`
  alt: `Image ${index + 1}`,
}));

return (
  <div>
    <Grid
      images={images}
      width={800}
      height={600}
    />
  </div>
);

info

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:

Name	Description	Type	Default
src	URL of the image	string
alt	Alt text for the image	string
width	Width of the image	number	100
height	Height of the image	number	100
id	Unique ID of the image	string
onClick	Callback to be executed on click	Function

info

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.