React Grid Layout : Nice grid layout system

Concepts

React-Grid-Layout is a grid layout system for React. It features auto-packing, draggable and resizable widgets, static widgets, a fluid layout, and separate layouts per responsive breakpoint.

Installation

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

npm install react-grid-layout

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

To make RGL responsive, use the element:

import { Responsive as ResponsiveGridLayout } from 'react-grid-layout';

class MyResponsiveGrid extends React.Component {
  render() {
    // {lg: layout1, md: layout2, ...}
    const layouts = getLayoutsFromSomewhere();
    return (
      <ResponsiveGridLayout 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>
      </ResponsiveGridLayout>
    )
  }
}

https://github.com/STRML/react-grid-layout#usage

Link

• https://github.com/STRML/react-grid-layout

• https://strml.github.io/react-grid-layout/examples/0-showcase.html