–> react-grid-layout

Recently, I was working on an exchange related project, using a very useful React library. Used to do drag components, first on the King of Dharma!

GIF recorded from BitMEX.com

ReactGridLayout is very simple to use => just like your other components 🙂

However, after importing the library (NPM install react-grid-layout), also import the related style files and make sure they work

/node_modules/react-grid-layout/css/styles.css /node_modules/react-res ! [](https://user-gold-cdn.xitu.io/2019/9/23/16d5c336e2dbcfa2? w=480&h=255&f=gif&s=724016)izable/css/styles.css
Copy the code

Of course, you can also write your own class

A basic example:

import GridLayout from 'react-grid-layout'; class MyFirstGrid extends React.Component { render() { // layout is an array of objects, see the demo for more complete usage var layout = [ {i: 'a', x: 0, y: 0, w: 1, h: 2, static: true}, {i: 'b', x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4}, {i: 'c', x: 4, y: 0, w: 1, h: 2} ]; return ( <GridLayout className="layout" layout={layout} cols={12} rowHeight={30} width={1200}> <div key="a">a</div> <div  key="b">b</div> <div key="c">c</div> </GridLayout> ) } }Copy the code

In this most basic use you must give the width attribute, otherwise your griditems will be crowded together and the console will report an error.

ReactGridLayout can even be used in conjunction with Responsive as long as its Responsive is applied

import { Responsive as ResponsiveGridLayout } from 'react-grid-layout'; class MyResponsiveGrid extends React.Component { render() { // {lg: layout1, md: layout2, ... } var 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> ) } }Copy the code

Breakpoints are layouts, cols is layouts, and layout1 is exactly the same as the base layout

However, this usage still requires the width to be specified. Inconvenient, right? Most of our scenes are full screen or adaptive width.

RGL provides WidthProvider HOC to meet your perverted needs… When combined with Responsive, it automatically determines the width during initialization and window resize. Here’s an example:

import { Responsive, WidthProvider } from 'react-grid-layout'; const ResponsiveGridLayout = WidthProvider(Responsive); class MyResponsiveGrid extends React.Component { render() { // {lg: layout1, md: layout2, ... } var 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> ) } }Copy the code

Let’s show another example of using localStorage to store a responsive layout

import React from "react"; import { WidthProvider, Responsive } from "react-grid-layout"; const ResponsiveReactGridLayout = WidthProvider(Responsive); const originalLayouts = getFromLS("layouts") || {}; /** * This layout demonstrates how to sync multiple responsive layouts to localstorage. */ class ResponsiveLocalStorageLayout extends React.PureComponent { constructor(props) { super(props); this.state = { layouts: JSON.parse(JSON.stringify(originalLayouts)) }; } static get defaultProps() { return { className: "layout", cols: { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }, rowHeight: 30}; } resetLayout() { this.setState({ layouts: {} }); } onLayoutChange(layout, layouts) { saveToLS("layouts", layouts); this.setState({ layouts }); } render() { return ( <div> <button onClick={() => this.resetLayout()}>Reset Layout</button> <ResponsiveReactGridLayout className="layout" cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }} rowHeight={30} layouts={this.state.layouts} onLayoutChange={(layout, layouts) => this.onLayoutChange(layout, layouts) } > <div key="1" data-grid={{ w: 2, h: 3, x: 0, y: 0, minW: 2, minH: 3 }}> <span className="text">1</span> </div> <div key="2" data-grid={{ w: 2, h: 3, x: 2, y: 0, minW: 2, minH: 3 }}> <span className="text">2</span> </div> <div key="3" data-grid={{ w: 2, h: 3, x: 4, y: 0, minW: 2, minH: 3 }}> <span className="text">3</span> </div> <div key="4" data-grid={{ w: 2, h: 3, x: 6, y: 0, minW: 2, minH: 3 }}> <span className="text">4</span> </div> <div key="5" data-grid={{ w: 2, h: 3, x: 8, y: 0, minW: 2, minH: 3 }}> <span className="text">5</span> </div> </ResponsiveReactGridLayout> </div> ); } } module.exports = ResponsiveLocalStorageLayout; function getFromLS(key) { let ls = {}; if (global.localStorage) { try { ls = JSON.parse(global.localStorage.getItem("rgl-8")) || {}; } catch (e) { /*Ignore*/ } } return ls[key]; } function saveToLS(key, value) { if (global.localStorage) { global.localStorage.setItem( "rgl-8", JSON.stringify({ [key]: value }) ); }}Copy the code

OK, that’s all. Finish work 👋

🙂