Package Exports

react-grid-system

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-grid-system) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-grid-system

A no CSS Bootstrap-like responsive grid system for React.

Installation
Getting started
Context types
API reference
Example application with SSR

Installation

npm install react-grid-system --save

Getting started

Responsive grid

react-grid-system provides a responsive grid similar to Bootstrap (see: http://getbootstrap.com/css/#grid), except here, it's React components only, and no CSS is used at all.

Three components are provided for creating responsive grids: Container, Row, and Col.

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>

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:

<p>
  <span>Your current screen class is </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:

const styleFunction = (screenClass, props) => {
  let fontSize = 10;
  if (screenClass === 'sm') fontSize = 20;
  if (screenClass === 'md') fontSize = 30;
  if (screenClass === 'lg') fontSize = 40;
  if (screenClass === 'xl') fontSize = 50;
  return {
      fontSize: `${fontSize}px`,
      ...props.style,
   };
};

<ScreenClassRender style={styleFunction}><p style={{ color: 'red' }}>Some red text, which font size depends on the screen class.</p></ScreenClassRender>

Finally, a ClearFix component can be used for resetting a row. This is sometimes needed when not all columns have the same height. For example:

<Row>
  <Col xs={6} sm={3}>
    xs=6 sm=3<br />
    This column has a lot more height, so a clearfix is needed for screenclass xs.
  </Col>
  <Col xs={6} sm={3}>xs=6 sm=3</Col>

  <ClearFix xs />

  <Col xs={6} sm={3}>xs=6 sm=3</Col>
  <Col xs={6} sm={3}>xs=6 sm=3</Col>
</Row>

Context types

The following child context types can be provided to the grid components, to alter their responsive behavior. An example on how to use them can be found in the Example application with SSR below.

Context Type	Default Value	Description
`breakpoints`	`[576, 768, 992, 1200]`	The breakpoints (minimum width) of devices in screen class `sm`, `md`, `lg`, and `xl`. The default values are based on the Bootstrap 4 breakpoints.
`containerWidths`	`[540, 750, 960, 1140]`	The container widths in pixels of devices in screen class `sm`, `md`, `lg`, and `xl`. The default values are based on the Bootstrap 4 container widths.
`gutterWidth`	`30`	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.
`serverSideScreenClass`	`xl`	The screen class used when the view port cannot be determined using `window`. This is useful for server-side rendering (SSR) based on the user agent. See also the example application below.
`phone`	`false`	deprecated When set to `true`, a server-side screen class of `xs` will be used.
`tablet`	`false`	deprecated When set to `true`, a server-side screen class of `md` will be used.

API reference

The API reference and further 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/JSxMachina/react-grid-system/tree/master/example.