React Grid System component

react-grid-system

React Grid System component.

Installation

1. Install the latest version of react and react-grid-system:

npm install --save react @trendmicro/react-grid-system

2. At this point you can import @trendmicro/react-grid-system and its styles in your application as follows:

import {
    Provider as GridSystemProvider,
    Container, Row, Col,
    Visible, Hidden
} from '@trendmicro/react-grid-system';

// Be sure to include styles at some point, probably during your bootstraping
import '@trendmicro/react-grid-system/dist/react-grid-system.css';

Recommended Setup

Create a common components directory including the GridSystem component, as shown below:

components/
  GridSystem/
    index.js

components/GridSystem/index.js

import '@trendmicro/react-grid-system/dist/react-grid-system.css';
export {
      Provider,
      Container, Row, Col,
      Visible, Hidden
} from '@trendmicro/react-grid-system';

Then, import components like below:

import {
      Provider as GridSystemProvider,
      Container, Row, Col,
      Visible, Hidden
} from './components/GridSystem';

Usage

<Container fluid gutterWidth={0}>
    <Row>
        <Col xs md={8}>col-md-8</Col>
        <Col width={6} md={4}>col-6 col-md-4</Col>
    </Row>
    <Row>
        <Col width={6} md={4}>col-6 col-md-4</Col>
        <Col width={6} md={4}>col-6 col-md-4</Col>
        <Col width={6} md={4}>col-6 col-md-4</Col>
    </Row>
    <Row>
        <Col width={6}>col-6</Col>
        <Col width={6}>col-6</Col>
    </Row>
</Container>

Provider

You can wrap <Container />, <Row />, and <Col /> in <Provider /> to pass grid system config through context.

<Provider
    breakpoints={[576, 768, 992, 1200, 1600]}
    containerWidths={[540, 720, 960, 1140, 1440]}
    columns={12}
    gutterWidth={0}
    layout="flexbox"
>
    <Container fluid>
        <Row>
            <Col>col</Col>
            <Col>col</Col>
            <Col>col</Col>
        </Row>
    </Container>
    <Container
        fluid
        columns={24}
        gutterWidth={30}
        layout="floats"
    >
        <Row>
            <Col>col</Col>
            <Col>col</Col>
        </Row>
    </Container>
</Provider>

Responsive Utilities

Use responsive utilities for showing and hiding content based on current viewport.

Hidden

Make an element hidden when the viewport is at the given breakpoint.

<Hidden xs sm>
    Hidden on extra small and small
</Hidden>
<Hidden md lg>
    Hidden on medium and large
</Hidden>

Visible

Make an element visible when the viewport is at the given breakpoint.

<Visible xs>
    Visible on extra small
</Visible>
<Visible sm>
    Visible on small
</Visible>
<Visible md>
    Visible on medium
</Visible>
<Visible lg>
    Visible on large
</Visible>
<Visible xl>
    Visible on extra large
</Visible>
<Visible xxl>
    Visible on double extra large
</Visible>

ScreenClass

Render content based on the screen class.

<ScreenClass>
    {screenClass => <div>{screenClass}</div>}
</ScreenClass>

<ScreenClass
    render={screenClass => <div>{screenClass}</div> }
/>

API

Properties

Provider

Container

Row

Col

Visible

Hidden

ScreenClass

GitHub