react-grid-layout-builder
React-grid-layout-builder offers a React user interface to interact with the react-grid-layout configuration. Be careful:
- React-grid-layout-builder doesn't add additional features to existing React-grid-layout. Read more about React-grid-layout features if required.
- React-grid-layout-builder works only on responsive react-grid-layout. Any help on other React-grid-layout component is welcome :)
Motivation
React-grid-layout is fun. I wanted to play with it without coding the configuration. So I tried to make a user-friendly editor. Happy to share it now :)
Demos
Installation
To try it locally:
- clone this repository
- go into the cloned folder
- cmd
npm i
- cmd
npm run start
- open urls
- http://localhost:3100/bootstrap/index.html for bootstrap editor
- http://localhost:3100/material-ui/index.html for material-ui editor
To install as dependency:
Install the React-Grid-Layout-builder package package using npm:
npm install react-grid-layout-builder
Include the following stylesheets in your application:
/node_modules/react-grid-layout-builder/css/styles.css
/node_modules/react-grid-layout/css/styles.css
/node_modules/react-resizable/css/styles.css
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="stylesheets/font-awesome/css/font-awesome.min.css">
This builder editor is graphically powered by Bootstrap
Include the following stylesheets in your application:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
Or create your own editor on the model given in src/bootstrapEditor. You'll be able to add fields or remove others
In that case, you'll have to wrap it with connectReactGridLayoutBuilderToEditor
. Example:
//YourOwnBuilderEditor is a copy of src/bootstrapEditor with your own style and your own fieldsvar ReactGridLayoutBuilder = ;;
This opening dock icon is graphically powered by Bootstrap
Include the following stylesheets in your application if you use it:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
Or put the editor anywhere else on your app.
Features
React-grid-layout-builder is to use on the responsive react-grid-layout only and can be used to:
- track any changes when playing with React-grid-layout
- edit number of columns on the fly
- edit breakpoints pixel value on the fly
- edit the height defined as basic row
- set all the grid as static
Usage
All questions about the grid generation and the possible configurable options are presents on react-grid-layout repository. I trust you know how to use react-grid-layout and will explain now how React-Grid-Layout-builder works. React-Grid-Layout-builder is used as a wrapper on an existing React-Grid-Layout component. To demonstrate how to us the builder, I'll try it on the responsive react-grid-layout example
To have the builder work with the responsive react-grid-layout example, we must:
- import the connect function
connectReactGridLayoutBuilder
to track any change in thereact-grid-layout
component - import the builder
ReactGridLayoutBuilder
to offer additional field to modify the react-grid-layout configuration - put the react-grid-layout configuration into a state to be able to modify it from a callback
- sent the callback that modify the react-grid-layout configuration to both
connectReactGridLayoutBuilder
andReactGridLayoutBuilder
An example:
;; //the responsive react-grid-layout is wrapped to be connected to the builder functionsconst ResponsiveReactGridLayout = ; ... { super; //the grid layout is put on the state thisstategridLayout = layouts: breakpoints: lg: 1200 md: 996 sm: 768 xs: 480 xxs: 0 cols: lg: 12 md: 10 sm: 6 xs: 4 xxs: 2 }} //any update from the grid layout or from the builder will update the component state to update both ReactGridLayoutBuilder & ResponsiveReactGridLayout data { this;} //An additional props updateConfigFunc must be provided to ResponsiveReactGridLayout to be able to track relevant changes when playing with the grid layout component it-self//The usual react grid layout configuration, put in the component state, is sent to the grid layout component. { return <div> <ReactGridLayoutBuilder reactGridLayout=thispropsconf updateConfigFunc=thispropsupdateConfig/> <ResponsiveReactGridLayout className="layout" ...thisstategridLayout updateConfigFunc=thispropsupdateConfig> <div key="1">1</div> <div key="2">2</div> <div key="3">3</div> </ResponsiveReactGridLayout> </div> }...
API:
ReactGridLayoutBuilder
<ReactGridLayoutBuilder/>
is a react component that renders fields to edit some of the react-grid-layout possible props.
This component uses Bootstrap & React-Bootstrap for rendering the fields
The builder can be used to set:
// If true, the container height swells and contracts to fit contentsautoSize: ?boolean = true // {name: pxVal}, e.g. {lg: 1200, md: 996, sm: 768, xs: 480}// Breakpoint names are arbitrary but must match in the cols and layouts objects.breakpoints: ?Object = lg: 1200 md: 996 sm: 768 xs: 480 xxs: 0 // # of cols. This is a breakpoint -> cols map, e.g. {lg: 12, md: 10, ...}cols: ?Object = lg: 12 md: 10 sm: 6 xs: 4 xxs: 2 // If true, the layout will compact verticallyverticalCompact: ?boolean = true // Margin between items [x, y] in px.margin: ?number number = 10 10 // Rows have a static height, but you can change this based on breakpoints// if you like.rowHeight: ?number = 150 //// Flags//isDraggable: ?boolean = trueisResizable: ?boolean = true
connectReactGridLayoutBuilder
connectReactGridLayoutBuilder
is a high order component wrapping the responsive react-grid-layout component to trigger a callback updateConfig
when the layout is changed there. the callback has as parameter the react-grid-layout possible props.
;; //the responsive react-grid-layout is wrapped to be connected to the builder functionsconst ResponsiveReactGridLayout = ; ... { super; //the grid layout is put on the state thisstategridLayout = layouts: breakpoints: lg: 1200 md: 996 sm: 768 xs: 480 xxs: 0 cols: lg: 12 md: 10 sm: 6 xs: 4 xxs: 2 }} //any update from the grid layout or from the builder will update the component state to update both ReactGridLayoutBuilder & ResponsiveReactGridLayout data { this;} //An additional props updateConfigFunc must be provided to ResponsiveReactGridLayout to be able to track relevant changes when playing with the grid layout component it-self//The usual react grid layout configuration, put in the component state, is sent to the grid layout component. { return <div> <ResponsiveReactGridLayout className="layout" ...thisstategridLayout updateConfigFunc=thispropsupdateConfig> <div key="1">1</div> <div key="2">2</div> <div key="3">3</div> </ResponsiveReactGridLayout> </div> }...
withOpeningDock
withOpeningDock
is a high order component used to have a react component displayed only if the user choose it. This is a simple UI component and you can choose to not use it if you want.
If you want to use it, wrap ReactGridLayoutBuilder
with it:
;const ReactGridLayoutBuilder = ; var DockedReactGridLayoutBuilder = ; ... { return <div> <DockedReactGridLayoutBuilder reactGridLayout=thispropsconf updateConfigFunc=thispropsupdateConfig/> <ResponsiveReactGridLayout className="layout" ...thisstategridLayout updateConfigFunc=thispropsupdateConfig> <div key="1">1</div> <div key="2">2</div> <div key="3">3</div> </ResponsiveReactGridLayout> </div> }...
TODO List
- Get feedbacks and improve
- Transform the generated layout as static
- Choose which item is static or not
- Choose which item is displayed or not
- Provide an editor for not-responsive grid layout
- Provide an editor based on material UI (thanks to @nywooz)
- Have the materia-ui demo working without bootstrap css (fix css grid)
- Save & load the current custom layout in local storage (thanks to @nywooz)
- Download the current layout & upload a custom one (thanks to @nywooz)