React-Grid-Layout

React-Grid-Layout is a grid layout system much like Packery or Gridster, for React.

Unlike those systems, it is responsive and supports breakpoints. Breakpoint layouts can be provided by the user or autogenerated.

RGL is React-only and does not require jQuery.

> GIF from production usage on BitMEX.com

[Demo | Changelog | WebpackBin Editable demo]

Table of Contents

• Demos
• Features
• Installation
• Usage
• Responsive Usage
• Providing Grid Width
• Grid Layout Props
• Responsive Grid Layout Props
• Grid Item Props
• Contribute
• TODO List

Demos

1. Showcase
2. Basic
3. No Dragging/Resizing (Layout Only)
4. Messy Layout Autocorrect
5. Layout Defined on Children
6. Static Elements
7. Adding/Removing Elements
8. Saving Layout to LocalStorage
9. Saving a Responsive Layout to LocalStorage
10. Minimum and Maximum Width/Height
11. Dynamic Minimum and Maximum Width/Height
12. No Vertical Compacting (Free Movement)

Projects based on React-Grid-Layout

• BitMEX
• AWS CloudFront Dashboards
• Metabase
• HubSpot
• ComNetViz
• Stoplight
• Reflect
• ez-Dashing

Know of others? Create a PR to let me know!

Features

• 100% React - no jQuery
• Compatible with server-rendered apps
• Draggable widgets
• Resizable widgets
• Static widgets
• Vertical auto-packing
• Bounds checking for dragging and resizing
• Widgets may be added or removed without rebuilding grid
• Layout can be serialized and restored
• Responsive breakpoints
• Separate layouts per responsive breakpoint
• Grid Items placed using CSS Transforms
• Performance: on / off, note paint (green) as % of time

Installation

Install the React-Grid-Layout package package using npm:

npm install react-grid-layout

Include the following stylesheets in your application:

/node_modules/react-grid-layout/css/styles.css
/node_modules/react-resizable/css/styles.css

Usage

Use ReactGridLayout like any other component. The following example below will produce a grid with three items where:

• users will not be able to drag or resize item a
• item b will be restricted to a minimum width of 2 grid blocks and a maximum width of 4 grid blocks
• users will be able to freely drag and resize item c

var ReactGridLayout = require('react-grid-layout');

var MyFirstGrid = React.createClass({
  render: function() {
    // layout is an array of objects, see the demo for more complete usage
    var layout = [
      {i: 'a', x: 0, y: 0, w: 1, h: 2, static: true},
      {i: 'b', x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4},
      {i: 'c', x: 4, y: 0, w: 1, h: 2}
    ];
    return (
      
        <div>a</div>
        <div>b</div>
        <div>c</div>
      
    )
  }
});

You may also choose to set layout properties directly on the children:

var ReactGridLayout = require('react-grid-layout');

var MyFirstGrid = React.createClass({
  render: function () {
    return (
      
        <div data-grid="{{x:">a</div>
        <div data-grid="{{x:">b</div>
        <div data-grid="{{x:">c</div>
      
    )
  }
});

Usage without Browserify/Webpack

A module usable in a `