Configure a Responsive Grid Component in a ReactJS Application in 14 Steps
Introduction:
When it comes to enforcing UI and workflow patterns strongly, ReactJS works great. This blog is all about configuration of the responsive react-grid-layout library and a simple material design focused UI library for creation of dynamic ReactJS application. There are several methods to create such applications but the one described in this blog is amazingly painless.
Moreover, it encompasses several facets like optimum use of container/component composition, externalization of configuration for a sample grid via an included JS object (To externalize configuration for a view component) and the clean component code.
Technical Specifications
Usage of React’s latest version React (v16+)
Usage of the dragging enabled and resizable grid layout with responsive breakpoints, for React available at https://github.com/STRML/react-grid-layout
The configuration for the grid and the items conducted as a JS object in a file (Nothing is hard coded in the grid or wrapper components themselves)
Setup of React grid layout using the responsive configuration
Grid caters 6 to 9 resizable boxes and the boxes have basic text in them, imported from the config file
UI of a material design concept
Technical Execution
Please find systematic directions for the development of Grid component using responsive react-grid-layout
[1] Setup a Hello World ReactJS application with version (v16.1.1)
[2] Install ‘react-grid-layout’ library package and ‘material-ui’ library package using npm
[3] Create page Home.js to render the application’s first page
[4] In Home.js, we can configure responsive react-grid-layout using ‘MuiThemeProvider’
Import MuiThemeProvider class using following code
Use MuiThemeProvider having following pattern
[5] Pass the grid configuration and grid data fetched from .json files to setup clean code
[6] Pass the Data and configuration to Grid component using ‘layoutData’ and ‘layoutConfige’
[7] Create Grid Component Grid.js
[8] Import Responsive, WidthProvider class from ‘react-grid-layout’.
[9] Create responsive grid layout component using following code.
[10] Use ‘ResponsiveReactGridLayout’; shown as below
[11] Then, render the grid using renderGridLayout function as shown in above snippet. ‘{this.renderGridLayout(layout)}’.
[12] ‘renderGridLayout’ function will be is as displayed below
Here, ‘Card’ is material control and we are implementing loop on ‘layout’ object to set the key, name and the background colour for each card.
[13] Define Grid’s default properties, events
[14] Import react-grid-layout css as well
The final output
This is what you get as a final layout.
Conclusion
I have shared the detailed description about configuration of responsive react-grid-layout library in a ReactJS application. In fact, ReactJS is much known for its server-side rendering and real-time updates capabilities. This experience of developing a completely dynamic and responsive ReactJS Application using Grid Components expanded my vision in the direction of utilizing its other strengths as well.
