react-visual-grid

⚡ The Powerful Visual grid / Gallery generator you always wanted

• ⚡ Features
• 💭 How it works
• ⚙️ Installation
• 🍵 Usage
• 🍫 Props
• 🍵 Example 1 (Horizontal)
• 🍵 Example 2 (Vertical)
• ImageProps
• ImageSizes
• Theme
• ⛏️ Built Using
• ✍️ Authors

⚡ Features

• Generate image grids quickly and easily.
• Built-in virtualization for improved performance.
• Load thousands of images without worrying about performance.
• UI controls for adjusting image sizes.
• Render images horizontally or vertically in a grid.
• Resizable Grid
• Built with typescript.
• Easy-to-understand API and a completely configurable React component.

💭 How it works

react-visual-grid works with the absolute minimum of properties to determine the optimal method to render images. All that is required is to specify the picture sizes desired, and the component will automatically determine the optimum approach to render the images.

Because virtualization is built in, you won't have to worry about performance.

The component handles loading 5k+ photos with ease in the example. Both horizontal and vertical virtualization are supported.

⚙️ Installation

You can install react-visual-grid using npm or yarn.

  npm install react-visual-grid

  yarn add react-visual-grid

🍵 Usage

Grids can be generated in two modes: Horizontal and Vertical. The default mode is vertical

import { Grid } from "react-visual-grid";

// generate random images using lorem picsum service
const images = Array.from({ length: 50 }, (_, i) => ({
  src: `https://picsum.photos/id/${Math.round(Math.random() * 110)}/800/600`,
  alt: `Image ${i + 1}`,
}));

const App = () => {
  return <Grid images={images} mode="auto" width={1800} height={1200} />;
};

🍫 Props

🍵 Example 1 (Horizontal)

import { Grid } from "react-visual-grid";

const App = () => {
  return (
    <Grid
      images={images}
      gridLayout="horizontal"
      width={1800}
      height={1200}
    />
  );
};

CodeSandbox Playground

🍵 Example 2 (Vertical)

import { Grid } from "react-visual-grid";

const App = () => {
  return (
    <Grid images={images} gridLayout="vertical" width={1800} height={1200} />
  );
};

CodeSandbox Playground

ImageProps

ImageSizes

react-visual-grid currently supports 3 zoom levels for the images. The default zoom level is 2x. The zoom levels can be configured using the imageSizes prop.

The component comes with a default configuration for the image sizes. The default configuration is as follows:

export const defaultImageSizes = {
  "1X": {
    width: 120,
    height: 100,
  },
  "2X": {
    width: 200,
    height: 180,
  },
  "3X": {
    width: 320,
    height: 280,
  },
};

you should be able to easily customize the desired dimensions for each zoom level.

Theme

Customize the colors of the component with the theme prop.

Here is the list of all the colors that can be customized:

<Grid
  gridLayout="vertical"
  theme={{
    backgroundColor: "#000",
    controlBgColor: "#303030",
    controlBtnColor: "#595959",
    controlsBackDropColor: "rgba(0, 0, 0, 0.95)",
    thumbnailBgColor: "#202020",
  }}
/>

Custom Theme

⛏️ Built Using

• typescript
• react
• classNames
• nanoid

✍️ Authors

• @prabhuignoto - Idea & Initial work