SOURCE

var GridLayout = window.ReactGridLayout
var WidthProvider = GridLayout.WidthProvider
const ReactGridLayout = WidthProvider(GridLayout);
var App = React.createClass({
  
  render() {
    // layout is an array of objects, see the demo for more complete usage
    var layout = [
      { x: 0, y: 0, w: 1, h: 10, i: "A" },
      { x: 0, y: 10, w: 1, h: 1, i: "B" },
      { x: 0, y: 11, w: 1, h: 1, i: "C" }
    ];
    return (
      <ReactGridLayout className="layout" layout={layout} cols={12} rowHeight={30}>
        {
      		layout.map(item => {
      			return <div key={item.i}>{item.i}</div>
      		})
      	}
      </ReactGridLayout>
    )
  }
})

ReactDOM.render(<App/>, document.getElementById('root'))

<div id='root'></div>

body {
  background: white;
  padding: 20px;
  overflow: scroll;
}

.react-grid-layout {
  background: #eee;
}

.react-grid-item:not(.react-grid-placeholder) {
  background: #ccc;
  border: 1px solid black;
}

.react-grid-item.static {
  background: #cce;
}