React-Grid-Layout
![NPM](https://nodei.co/npm/react-grid-layout.png?downloads=true&downloadRank=true&stars=true)
Summary
View the Demo
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.
If you have a feature request, please add it as an issue or make a pull request. See also the TODOs.
Demos
- Showcase
- Basic
- No Dragging/Resizing (Layout Only)
- Messy Layout Autocorrect
- Layout Defined on Children
- Static Elements
- Adding/Removing Elements
- Saving Layout to LocalStorage
- Saving a Responsive Layout to LocalStorage
- Minimum and Maximum Width/Height
- Dynamic Minimum and Maximum Width/Height
- No Vertical Compacting (Free Movement)
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
Usage
Use ReactGridLayout like any other component.
var ReactGridLayout = require('react-grid-layout');
render: function() {
var layout = getOrGenerateLayout();
return (
<ReactGridLayout className="layout" layout={layout}
cols={12} rowHeight={30}>
<div key={1}>1</div>
<div key={2}>2</div>
<div key={3}>3</div>
</ReactGridLayout>
)
}
You can also set layout properties directly on the children:
var ReactGridLayout = require('react-grid-layout');
render: function() {
return (
<ReactGridLayout className="layout" cols={12} rowHeight={30}>
<div key={1} _grid={{x: 0, y: 0, w: 1, h: 2}}>1</div>
<div key={2} _grid={{x: 1, y: 0, w: 1, h: 2}}>2</div>
<div key={3} _grid={{x: 2, y: 0, w: 1, h: 2}}>3</div>
</ReactGridLayout>
)
}
Usage without Browserify/Webpack
A module usable in a <script>
tag is included here. It uses a UMD shim and
excludes React
, so it must be otherwise available in your application, either via RequireJS or on window.React
.
Responsive Usage
To make RGL responsive, use the <ResponsiveReactGridLayout>
element:
var ResponsiveReactGridLayout = require('react-grid-layout').Responsive;
render: function() {
var layouts = getLayoutsFromSomewhere();
return (
<ResponsiveReactGridLayout className="layout" layouts={layouts}
breakpoints={{lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}}
cols={{lg: 12, md: 10, sm: 6, xs: 4, xxs: 2}}>
<div key={1}>1</div>
<div key={2}>2</div>
<div key={3}>3</div>
</ResponsiveReactGridLayout>
)
}
When in responsive mode, you should supply at least one breakpoint via the layouts
property.
When using layouts
, it is best to supply as many breakpoints as possible, especially the largest one.
If the largest is provided, RGL will attempt to interpolate the rest.
For the time being, it is not possible to supply responsive mappings via the _grid
property on individual
items, but that is coming soon.
Grid Layout Props
RGL supports the following properties (see the source for the final word on this):
autoSize: React.PropTypes.bool,
breakpoints: React.PropTypes.object,
cols: React.PropTypes.number,
draggableCancel: React.PropTypes.string,
draggableHandle: React.PropTypes.string,
verticalCompact: React.PropTypes.bool,
layout: React.PropTypes.array,
initialWidth: React.PropTypes.number,
margin: React.PropTypes.array,
rowHeight: React.PropTypes.number,
isDraggable: React.PropTypes.bool,
isResizable: React.PropTypes.bool,
useCSSTransforms: React.PropTypes.bool,
listenToWindowResize: React.PropTypes.bool,
onLayoutChange: React.PropTypes.func,
onDragStart: React.PropTypes.func,
onDrag: React.PropTypes.func,
onDragStop: React.PropTypes.func,
onResizeStart: React.PropTypes.func,
onResize: React.PropTypes.func,
onResizeStop: React.PropTypes.func
Responsive Grid Layout Props
The responsive grid layout can be used instead. It supports all of the props above, excepting layout
.
The new properties and changes are:
breakpoints: React.PropTypes.object,
cols: React.PropTypes.object,
layouts: React.PropTypes.object
onBreakpointChange: React.PropTypes.func,
onLayoutChange: React.PropTypes.func
onWidthChange: React.Proptypes.func
Grid Item Props
RGL supports the following properties on grid items or layout items. When initializing a grid,
build a layout array (as in the first example above), or attach this object as the _grid
property
to each of your child elements (as in the second example).
Note that if a grid item is provided but incomplete (missing one of x, y, w, or h
), an error
will be thrown so you can correct your layout.
If no properties are provided for a grid item, one will be generated with a width and height of 1
.
You can set minimums and maximums for each dimension. This is for resizing; it of course has no effect if resizing
is disabled. Errors will be thrown if your mins and maxes overlap incorrectly, or your initial dimensions
are out of range.
Any GridItem properties defined directly on the layout item will take precedence over globally-set options. For
example, if the layout has the property isDraggable: false
, but the grid item has isDraggable: true
, the item
will be draggable.
{
x: React.PropTypes.number.isRequired,
y: React.PropTypes.number.isRequired,
w: React.PropTypes.number.isRequired,
h: React.PropTypes.number.isRequired,
minW: React.PropTypes.number,
maxW: React.PropTypes.number,
minH: React.PropTypes.number,
maxH: React.PropTypes.number,
static: React.PropTypes.bool,
isDraggable: React.PropTypes.bool,
isResizable: React.PropTypes.bool,
className: React.PropTypes.string,
handle: React.PropTypes.string,
cancel: React.PropTypes.string
}
Grid Layout Defaults
{
autoSize: true,
breakpoints: {lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0},
cols: 10,
rowHeight: 150,
initialWidth: 1280,
margin: [10, 10],
minH: 1,
minW: 1,
maxH: Infinity,
maxW: Infinity,
isDraggable: true,
isResizable: true,
useCSSTransforms: true,
listenToWindowResize: true,
verticalCompact: true
}
TODO List