A powerful Bootstrap-like responsive grid system for React.
Table of contents
# Install react peer dependency npm install react@16 # Install react grid system npm install react-grid-system --save
react-grid-system provides a responsive grid similar to Bootstrap (see: https://getbootstrap.com/docs/4.1/layout/grid/). However,
react-grid-system is purely React, even no CSS or class names are used. Moreover, it adds various powerful features, such as setting breakpoints and gutter widths through React's context.
Three components are provided for creating responsive grids:
An example on how to use these:
;<Container><Row><Col sm=4>One of three columns</Col><Col sm=4>One of three columns</Col><Col sm=4>One of three columns</Col></Row></Container>
For all features of these components, please have a look at the API documentation: https://JSxMachina.github.io/react-grid-system/
Next to the grid, two components are provided for showing or hiding content:
The main difference between these two components and the similar CSS classes provided by Bootstrap is that these two components do not render the content at all when it should be hidden, instead of just hiding it with CSS.
Some examples on how to use these components:
;<p><span>Your current screen </span><Visible xs><strong>xs</strong></Visible><Visible sm><strong>sm</strong></Visible><Visible md><strong>md</strong></Visible><Visible lg><strong>lg</strong></Visible><Visible xl><strong>xl</strong></Visible><span></span></p>
;<Visible xs sm><p>Paragraph visible on extra small and small</p></Visible><Hidden xs sm><p>Paragraph hidden on extra small and small</p></Hidden><Visible md lg><p>Paragraph visible on medium and large</p></Visible><Hidden md lg><p>Paragraph hidden on medium and large</p></Hidden>
Next to that, the
ScreenClassRender component is provided, for rendering a component differently based on the screen class. An example on how to use this:
;<ScreenClassRender render=<p style= fontSize: 'lg' 'xl' ? '2rem' : '1rem' >Screen class: screenClass</p>/>
The following settings can be configured, to alter the responsive behavior of the grid components:
||The breakpoints (minimum width) of devices in screen class
||The container widths in pixels of devices in screen class
||The gutter width in pixels. A gutter width of 30 means 15px on each side of a column. The default value is based on the Bootstrap 4 gutter width.|
||The number of colums in the grid .|
||The screen class used when the view port cannot be determined using
These settings can be configured in the following way:
An example on how to use them can be found in the Example application with SSR below.
Extensive documentation of all components can be found at the GitHub pages: https://JSxMachina.github.io/react-grid-system/
Example application with SSR
An example application with server-side rendering using all the features of
react-grid-system can be found at https://github.com/gerbenmeyer/react-ssr-example.