Introducing react-visual-grid, a smart image grid component for React

Introduction

If you’ve ever used Pinterest, you know just how useful image grids can be. Image grids let you showcase and present products, dishes, architecture, or anything else you can think of in an organized way that’s easy to follow and understand. In this post, we’ll walk through the steps of building your own image grid with the react-visual-grid package.

🖼️ What is react-visual-grid?

react-visual-grid is a library that allows developers to easily create image grids with React. It provides an intuitive and customizable interface for organizing images into 2 unique grid layouts. With its versatile API, developers can create grids with different image sizes, and configurations.

Here are the main highlights of the library:

🪟 Generate grids easily.
➡️ Render images horizontally or vertically in a grid.
⚡ Load thousands of images without worrying about performance.
🎛️ UI controls for adjusting image sizes.
💡 Resizable Grid
📦 Lightweight (7kb gzipped)
💪 Built with typescript.
💡 Intuitive API

💡Why use react-visual-grid?

react-visual-grid is built with performance in mind, allowing it to render large datasets quickly without slowing down your app.

This makes it perfect for applications that require displaying a lot of images at once.

The library provides an easy and smart solution for building image grids quickly and efficiently. With its performance benefits and styling options, developers can create grids that are both visually pleasing and highly performant.

🚀 Getting started with react-visual-grid

To install react-visual-grid, simply run the following command:

npm install --save react-visual-grid

or if you are using Yarn

yarn add react-visual-grid

Once installed, you can start building grids in your project. To do this, simply import the Grid component from react-visual-grid in the desired component where you'd like the grid to be rendered:

import { Grid } from react-visual-grid;

You're now ready to start building grids with react-visual-grid. Read on to learn more about how to configure and customize your grids.

🔨 Building the Grid

The vertical layout displays images from top to bottom, while the horizontal layout displays images from left to right.

The library will automatically figure out the images that can be displayed depending on the width and height of the container and size of the image, so you won't have to worry about manually specifying how many images should be in each row or column. This makes it easier to create an image grid that looks great on all devices, regardless of their size and resolution.

Here's an example of code that you can use to create an image grid with 20 images. The images will be loaded from the Lorem Picsum service, and the code uses the vertical layout (default) to arrange the images from top to bottom.

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

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

const App = () => {
  return <Grid images={images} width={900} height={1200} />;
};

Now that we have seen how to create a simple grid, let's see how to create an image grid with a horizontal layout.

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

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

🔍 Zoom levels & Image sizes

There are three zoom levels that can be adjusted in react-visual-grid.

By adjusting the zoom levels, you can create a unique look for your image grid. Whether you want your images to take up more space or be smaller and more subtle, react-visual-grid makes it easy to find the perfect balance.

No matter what type of image grid you’re creating, being able to customize the zoom levels is an essential part of the process.

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

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

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

✨ Resizable & Fullscreen

The resizable grid feature is especially useful, as it will automatically adjust the number of images depending on the size of the grid. This ensures that your image grid looks great regardless of the size or shape of the container.

Fullscreen capabilities are also available, allowing you to show more images on the grid. With fullscreen, your users will be able to easily view all the images without having to scroll through pages. Plus, they can also zoom in and out of the images, making it easier to see them in detail.

⚡Performance & Virtualization

When it comes to loading hundreds of images onto a web page, performance can quickly become an issue. Browsers have limited resources, and if the page contains too many images, it will take a long time to render them all.

One way to help improve performance is by using virtualization. This is a technique that only renders the visible images and puts the rest in an offscreen state. This reduces the strain on the browser, allowing it to render more quickly and efficiently.

react-visual-grid has an in-built virtualization feature which makes building image grids easier and faster than ever before. This feature works by only rendering the images that are visible on the screen, leaving the rest in an offscreen state until they are needed.

🎨 Theme

One of the best features of react-visual-grid is its flexibility in customizing the component theme. With just a few simple tweaks, you can completely change the look and feel of your image grid. This allows you to give your grid a consistent, professional appearance that matches your website’s overall design.

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

Conclusion

react-visual-grid is an incredibly powerful tool for building robust and visually appealing image grids. It provides a simple, lightweight solution for creating a wide range of different grid layouts.

I really hope you enjoyed this post. Please feel free to open an issue in the Github repository or reach out to me, if you have any special queries about its usage or you have any suggestions.

Meta

Prabhu Murthy – @prabhumurthy2 – prabhu.m.murthy@gmail.com

CodeSandbox Playground

Distributed under the MIT license. See LICENSE for more information.

https://github.com/prabhuignoto/react-visual-grid