React-Grid-System

A powerful Bootstrap-like responsive grid system for React.

Table of contents

Installation

# Install react peer dependency
npm install react@16

# Install react grid system
npm install react-grid-system --save

Getting started

Responsive grid

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: ContainerRow, and Col.

An example on how to use these:

import { Container, Row, Col } from 'react-grid-system';


  
    

      One of three columns

 



      One of three columns

 



      One of three columns

 



For all features of these components, please have a look at the API documentation: https://JSxMachina.github.io/react-grid-system/

Responsive utilities

Next to the grid, two components are provided for showing or hiding content: Visible and Hidden. 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:

import { Visible } from 'react-grid-system';

Your current screen class is xs sm md lg xl .

 

import { Visible, Hidden } from 'react-grid-system';

Paragraph visible on extra small and small.

 

Paragraph hidden on extra small and small.

 

Paragraph visible on medium and large.

 

Paragraph hidden on medium and large.

 


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:

import { ScreenClassRender } from 'react-grid-system';

 (

Screen class: {screenClass}

)} />

Subscribe to the Newsletter

Get our latest news,tutorials,guides,tips & deals delivered to your inbox.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

shares