Getting Started with React-Grid-Layout

React-Grid-Layout is a powerful grid layout system that allows you to create responsive grid layouts with ease.

The Dashboard component in the Bookmark Dashboard leveraged React-Grid-Layout, which provides built-in drag-and-drop and resizing support - making it effortless to integrate and use.

Here’s a screenshot of React-Grid-Layout in action within Bookmark Dashboard:

It is obvious that the library enables dynamic grid layouts with seamless dragging and resizing - perfect for building customizable dashboards.

Now let me walk you through how to use React-Grid-Layout - the powerful library behind Bookmark Dashboard's flexible layout system.

Installation

First, install the package via npm or yarn:

npm install react-grid-layout

yarn add react-grid-layout

Basic Usage

Here's a simple example from my own implementation:

import React, { useState, useCallback } from 'react';
import { Responsive, WidthProvider } from 'react-grid-layout';
import GridItem from './GridItem';

import 'react-grid-layout/css/styles.css';
import 'react-resizable/css/styles.css'; // dependency of react-grid-layout

const ResponsiveGridLayout = WidthProvider(Responsive);

function MyDashboard() {
  const [layout, updateLayout] = useState([]);

  const handleDragAndResize = useCallback((layout, oldItem, newItem) => {
      updateLayout(layout)
  }, []);

  return (
    <ResponsiveGridLayout
      breakpoints={{ md: 960, sm: 720 }}
      cols={{ md: 12, sm: 12 }}
      rowHeight={40}
      layouts={layout}
      onDragStop={handleDragAndResize}
      onResizeStop={handleDragAndResize}
    >
      {layout.map((item) => (
        <div key={item.i}>
          <GridItem item={item} />
        </div>
      ))}
    </ResponsiveGridLayout>
  )
}

ResponsiveGridLayout‌ refers to the complete grid system that automatically adapts to its container. It is responsive and supports breakpoints. Based on breakpoints, the container's width will be divided into specific number of columns.

Within the grid layout, each grid item is measured by grid unit, which is the foundational building block.

Dimensions of grid unit:

• width: container's width / the number of columns
• height: Defined by rowHeight

Based on the grid unit, a grid item's dimension calculated:

• The actual width of a grid item = grid unit width * w
• The actual height of a grid item = grid unit height * h

For more about the width and height of grid item, refer to the document here.

Now, let's examine the data structure of layout property to understand how each grid item is rendered. We will find out where the w and h come from.
Here is some example data of layout:

// layout
[
  {
    "i": "3184",
    "w": 4,
    "h": 3,
    "x": 0,
    "y": 4,
    "moved": false,
    "static": false
  },
  {
    "i": "3232",
    "w": 8,
    "h": 4,
    "x": 0,
    "y": 0,
    "moved": false,
    "static": false
  },
  {
    "i": "3216",
    "w": 4,
    "h": 9,
    "x": 8,
    "y": 0,
    "moved": false,
    "static": false
  },
  {
    "i": "3196",
    "w": 4,
    "h": 5,
    "x": 4,
    "y": 4,
    "moved": false,
    "static": false
  }
]

The i field represents the ID of a grid item, while w, h, x, and y define its dimensions and position. Specifically:

• w (width) and h (height) determine the item's size in grid units.

• x and y specify the coordinates of the item's top-left corner, positioning it within the grid.

The layout consists of an array of these grid items, each with their own i, w, h, x, and y values, collectively defining how they are rendered on the dashboard.

Whenever a grid item is resized or moved to a new position, either onResizeStop or onDragStop will be triggered, passing the updated layout data to the handler function. Updating this layout data will refresh the entire grid system.

GridItem is a customized component that represents grid items's content. In my implementation, it displays a list of bookmarks, but you can customize it to contain any content you need.

Finally

React-Grid-Layout is a user-friendly yet powerful library. My development experience with this library has been excellent. Its GitHub repository provides comprehensive documentation and live demos, making it highly recommended for developers to have a try.

Thanks for reading !

Comments

[Dotallio]

Super intuitive to use.

[sheep]

Really!