React-Grid-Layout

A draggable and resizable grid layout with responsive breakpoints, for Reac...

ReactLayoutDrag and drop
react-grid-layout/react-grid-layoutreact-grid-layout.github.io/react-grid-layout/examples/0-showcase.htmlreact-grid-layout

README

React-Grid-Layout

travis build CDNJS npm package [npm downloads]()

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.

BitMEX UI

GIF from production usage on BitMEX.com


[Demo | Changelog | CodeSandbox Editable demo]

Table of Contents


- Demos
- Features
- Installation
- Usage
- Responsive Usage
- Providing Grid Width
- Grid Layout Props
- Responsive Grid Layout Props
- Grid Item Props
- User Recipes
- Performance
- Contribute
- TODO List

Demos


1. Showcase
1. Basic
1. No Dragging/Resizing (Layout Only)
1. Messy Layout Autocorrect
1. Layout Defined on Children
1. Static Elements
1. Adding/Removing Elements
1. Saving Layout to LocalStorage
1. Saving a Responsive Layout to LocalStorage
1. Minimum and Maximum Width/Height
1. Dynamic Minimum and Maximum Width/Height
1. No Vertical Compacting (Free Movement)
1. Prevent Collision
1. Error Case
1. Toolbox
1. Drag From Outside
1. Bounded Layout
1. Resizable Handles
1. Scaled Containers
1. Allow Overlap

Projects Using React-Grid-Layout


- BitMEX
- AWS CloudFront Dashboards
- Grafana
- Metabase
- HubSpot
- ComNetViz
- Stoplight
- Reflect
- ez-Dashing
- Kibana
- Graphext
- Monday
- Quadency
- Hakkiri
- Ubidots
- Statsout
- Datto RMM

_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
- Configurable packing: horizontal, vertical, or off
- 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 with CSS Transforms: on / off, note paint (green) as % of time
- Compatibility with ``

VersionCompatibility
---------------------------
>=React
>=React
>=React
0.8.React
<React

Installation


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

  1. ``` sh
  2. npm install react-grid-layout
  3. ```

Include the following stylesheets in your application:

  1. ```
  2. /node_modules/react-grid-layout/css/styles.css
  3. /node_modules/react-resizable/css/styles.css
  4. ```

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

  1. ``` js
  2. import GridLayout from "react-grid-layout";

  4. class MyFirstGrid extends React.Component {
  5.   render() {
  6.     // layout is an array of objects, see the demo for more complete usage
  7.     const layout = [
  8.       { i: "a", x: 0, y: 0, w: 1, h: 2, static: true },
  9.       { i: "b", x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4 },
  10.       { i: "c", x: 4, y: 0, w: 1, h: 2 }
  11.     ];
  12.     return (
  13.       <GridLayout
  14.         className="layout"
  15.         layout={layout}
  16.         cols={12}
  17.         rowHeight={30}
  18.         width={1200}
  19.       >
  20.         <div key="a">a</div>
  21.         <div key="b">b</div>
  22.         <div key="c">c</div>
  23.       </GridLayout>
  24.     );
  25.   }
  26. }
  27. ```

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

  1. ``` js
  2. import GridLayout from "react-grid-layout";

  4. class MyFirstGrid extends React.Component {
  5.   render() {
  6.     return (
  7.       <GridLayout className="layout" cols={12} rowHeight={30} width={1200}>
  8.         <div key="a" data-grid={{ x: 0, y: 0, w: 1, h: 2, static: true }}>
  9.           a
  10.         </div>
  11.         <div key="b" data-grid={{ x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4 }}>
  12.           b
  13.         </div>
  14.         <div key="c" data-grid={{ x: 4, y: 0, w: 1, h: 2 }}>
  15.           c
  16.         </div>
  17.       </GridLayout>
  18.     );
  19.   }
  20. }
  21. ```

Usage without Browserify/Webpack


A module usable in a `