<commit_before># React-Grid-Layout

[![NPM](https://nodei.co/npm/react-grid-layout.png?downloads=true&downloadRank=true&stars=true)](https://www.npmjs.com/package/react-grid-layout)

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

- [Summary](#summary)
- [Demos](#demos)
- [Features](#features)
- [Usage](#usage)
- [Responsive Usage](#responsive-usage)
- [Grid Layout Props](#grid-layout-props)
- [Grid Item Props](#grid-item-props)
- [Grid Layout Defaults](#grid-layout-defaults)
- [TODO List](#todo-list)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

#### Summary

[View the Demo](https://strml.github.io/react-grid-layout/examples/0-showcase.html)

React-Grid-Layout is a grid layout system much like [Packery](http://packery.metafizzy.co/) or 
[Gridster](http://gridster.net), 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](#todo-list).

#### Demos

1. [Showcase](https://strml.github.io/react-grid-layout/examples/0-showcase.html)
1. [Basic](https://strml.github.io/react-grid-layout/examples/1-basic.html)
1. [No Dragging/Resizing (Layout Only)](https://strml.github.io/react-grid-layout/examples/2-no-dragging.html)
1. [Messy Layout Autocorrect](https://strml.github.io/react-grid-layout/examples/3-messy.html)
1. [Layout Defined on Children](https://strml.github.io/react-grid-layout/examples/4-grid-property.html)
1. [Static Elements](https://strml.github.io/react-grid-layout/examples/5-static-elements.html)
1. [Adding/Removing Elements](https://strml.github.io/react-grid-layout/examples/6-dynamic-add-remove.html)
1. [Saving Layout to LocalStorage](https://strml.github.io/react-grid-layout/examples/7-localstorage.html)
1. [Saving a Responsive Layout to LocalStorage](https://strml.github.io/react-grid-layout/examples/8-localstorage-responsive.html)

#### 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](http://i.imgur.com/FTogpLp.jpg) / [off](http://i.imgur.com/gOveMm8.jpg), note paint (green) as % of time

#### Usage

Use ReactGridLayout like any other component.

```javascript
var ReactGridLayout = require('react-grid-layout');
//...
render: function() {
  // layout is an array of objects, see the demo
  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:


```javascript
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>
  )
}
```

#### Responsive Usage

To make RGL responsive, use the `<ResponsiveReactGridLayout>` element:

```javascript
var ResponsiveReactGridLayout = require('react-grid-layout').Responsive;
//...
render: function() {
  // {lg: layout1, md: layout2, ...}
  var layouts = getLayoutsFromSomewhere();
  return (
    <ResponsiveReactGridLayout className="layout" layouts={layouts} 
      cols={{lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}}>
      <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):

```javascript
// 
// Basic props
//

// If true, the container height swells and contracts to fit contents
autoSize: React.PropTypes.bool,

// {name: pxVal}, e.g. {lg: 1200, md: 996, sm: 768, xs: 480}
breakpoints: React.PropTypes.object,

// Number of columns in this layout.
cols: React.PropTypes.number,

// A selector for the draggable handler
handle: React.PropTypes.string,

// Layout is an array of object with the format:
// {x: Number, y: Number, w: Number, h: Number}
layout: React.PropTypes.array,

// This allows setting this on the server side
initialWidth: React.PropTypes.number,

// margin between items [x, y] in px
margin: React.PropTypes.array,

// Rows have a static height, but you can change this based on breakpoints 
// if you like
rowHeight: React.PropTypes.number,

//
// Flags
//
isDraggable: React.PropTypes.bool,
isResizable: React.PropTypes.bool,
// Uses CSS3 translate() instead of position top/left, about 6x faster paint performance
useCSSTransforms: React.PropTypes.bool,

// If false, you should supply width yourself. Good if you want to debounce resize events
// or reuse a handler from somewhere else.
listenToWindowResize: React.PropTypes.bool,

// 
// Callbacks<commit_msg>Adds a note about using custom keys<commit_after># React-Grid-Layout

[![NPM](https://nodei.co/npm/react-grid-layout.png?downloads=true&downloadRank=true&stars=true)](https://www.npmjs.com/package/react-grid-layout)

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

- [Summary](#summary)
- [Demos](#demos)
- [Features](#features)
- [Usage](#usage)
- [Responsive Usage](#responsive-usage)
- [Grid Layout Props](#grid-layout-props)
- [Grid Item Props](#grid-item-props)
- [Grid Layout Defaults](#grid-layout-defaults)
- [TODO List](#todo-list)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

#### Summary

[View the Demo](https://strml.github.io/react-grid-layout/examples/0-showcase.html)

React-Grid-Layout is a grid layout system much like [Packery](http://packery.metafizzy.co/) or 
[Gridster](http://gridster.net), 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](#todo-list).

#### Demos

1. [Showcase](https://strml.github.io/react-grid-layout/examples/0-showcase.html)
1. [Basic](https://strml.github.io/react-grid-layout/examples/1-basic.html)
1. [No Dragging/Resizing (Layout Only)](https://strml.github.io/react-grid-layout/examples/2-no-dragging.html)
1. [Messy Layout Autocorrect](https://strml.github.io/react-grid-layout/examples/3-messy.html)
1. [Layout Defined on Children](https://strml.github.io/react-grid-layout/examples/4-grid-property.html)
1. [Static Elements](https://strml.github.io/react-grid-layout/examples/5-static-elements.html)
1. [Adding/Removing Elements](https://strml.github.io/react-grid-layout/examples/6-dynamic-add-remove.html)
1. [Saving Layout to LocalStorage](https://strml.github.io/react-grid-layout/examples/7-localstorage.html)
1. [Saving a Responsive Layout to LocalStorage](https://strml.github.io/react-grid-layout/examples/8-localstorage-responsive.html)

#### 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](http://i.imgur.com/FTogpLp.jpg) / [off](http://i.imgur.com/gOveMm8.jpg), note paint (green) as % of time

#### Usage

Use ReactGridLayout like any other component.

```javascript
var ReactGridLayout = require('react-grid-layout');
//...
render: function() {
  // layout is an array of objects, see the demo
  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:


```javascript
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>
  )
}
```

#### Responsive Usage

To make RGL responsive, use the `<ResponsiveReactGridLayout>` element:

```javascript
var ResponsiveReactGridLayout = require('react-grid-layout').Responsive;
//...
render: function() {
  // {lg: layout1, md: layout2, ...}
  var layouts = getLayoutsFromSomewhere();
  return (
    <ResponsiveReactGridLayout className="layout" layouts={layouts} 
      cols={{lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}}>
      <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):

```javascript
// 
// Basic props
//

// If true, the container height swells and contracts to fit contents
autoSize: React.PropTypes.bool,

// {name: pxVal}, e.g. {lg: 1200, md: 996, sm: 768, xs: 480}
breakpoints: React.PropTypes.object,

// Number of columns in this layout.
cols: React.PropTypes.number,

// A selector for the draggable handler
handle: React.PropTypes.string,

// Layout is an array of object with the format:
// {x: Number, y: Number, w: Number, h: Number}
// The index into the layout must match the key used on each item component.
// If you choose to use custom keys, you can specify that key in the layout
// array objects like so:
// {i: String, x: Number, y: Number, w: Number, h: Number}
layout: React.PropTypes.array,

// This allows setting this on the server side
initialWidth: React.PropTypes.number,

// margin between items [x, y] in px
margin: React.PropTypes.array,

// Rows have a static height, but you can change this based on breakpoints 
// if you like
rowHeight: React.PropTypes.number,

//
// Flags
//
isDraggable: React.PropTypes.bool,
isResizable: React.PropTypes.bool,
// Uses CSS3 translate() instead of position top/left, about 6x faster paint performance
useCSSTransforms: React.PropTypes.bool,

// If false, you should supply width yourself. Good if you want to debounce resize events
// or reuse a handler from somewhere else.
listenToWindowResize: React.PropTypes.bool,

// 
// Callbacks
{'fraction_non_alphanumeric': 0.14021956087824353, 'fraction_numerical': 0.015302727877578177, 'mean_word_length': 4.080270384452894, 'pattern_counts': {'":': 0, '<': 59, '<?xml version=': 0, '>': 59, 'https://': 24, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 4, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6998116', 'n_tokens_mistral': 4061, 'n_tokens_neox': 3838, 'n_words': 1206}