react-grid-system

React Grid System component

Demo: https://trendmicro-frontend.github.io/react-grid-system

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

Name | Type | Default | Description :--- | :--- | :------ | :---------- breakpoints | Number[] | [576, 768, 992, 1200, 0] | The breakpoints (minimum width) of devices in screen class sm, md, lg, xl, and xxl. containerWidths | Number[] | [540, 720, 960, 1140, 0] | The container widths in pixels of devices in screen class sm, md, lg, xl, and xxl. columns | Number | 12 | The number of columns. gutterWidth | Number | 0 | The horizontal padding (called gutter) between two columns. A gutter width of 30 means 15px on each side of a column. layout | One of:'flexbox''floats' | 'flexbox' | The grid system layout.

Container

Name | Type | Default | Description :--- | :--- | :------ | :---------- fluid | Boolean | false | True makes the container full-width, false fixed-width. xs | Boolean | false | True makes container fluid only in xs, not present means fluid everywhere. sm | Boolean | false | True makes container fluid only in sm, not present means fluid everywhere. md | Boolean | false | True makes container fluid only in md, not present means fluid everywhere. lg | Boolean | false | True makes container fluid only in lg, not present means fluid everywhere. xl | Boolean | false | True makes container fluid only in xl, not present means fluid everywhere. xxl | Boolean | false | True makes container fluid only in xxl, not present means fluid everywhere. columns | Number | inherited | The number of columns. gutterWidth | Number | inherited | The horizontal padding (called gutter) between two columns. A gutter width of 30 means 15px on each side of a column. layout | One of:'flexbox''floats' | inherited | The grid system layout.

Row

Name | Type | Default | Description :--- | :--- | :------ | :----------

Col

Name | Type | Default | Description :--- | :--- | :------ | :---------- width | Number or 'auto' | | The width of the column for all screen classes.Note: 'auto' is only supported with the flexbox layout. xs | Number, Boolean or 'auto' | | The width of the column for screen class xs.Note: 'auto' and true are only supported with the flexbox layout. sm | Number, Boolean or 'auto' | | The width of the column for screen class sm.Note: 'auto' and true are only supported with the flexbox layout. md | Number, Boolean or 'auto' | | The width of the column for screen class md.Note: 'auto' and true are only supported with the flexbox layout. lg | Number, Boolean or 'auto' | | The width of the column for screen class lg.Note: 'auto' and true are only supported with the flexbox layout. xl | Number, Boolean or 'auto' | | The width of the column for screen class xl.Note: 'auto' and true are only supported with the flexbox layout. xxl | Number, Boolean or 'auto' | | The width of the column for screen class xxl.Note: 'auto' and true are only supported with the flexbox layout. offset | { xs, sm, md, lg, xl, xxl } | | The offset of this column for all screen classes. pull | { xs, sm, md, lg, xl, xxl } | | The amount this column is pulled to the left for all screen classes. push | { xs, sm, md, lg, xl, xxl } | | The amount this column is pushed to the right for all screen classes.

Visible

Name | Type | Default | Description :--- | :--- | :------ | :---------- xs | Boolean | false | Visible on extra small devices. sm | Boolean | false | Visible on small devices. md | Boolean | false | Visible on medimum devices. lg | Boolean | false | Visible on large devices. xl | Boolean | false | Visible on extra large devices. xxl | Boolean | false | Visible on double extra large devices.

Hidden

Name | Type | Default | Description :--- | :--- | :------ | :---------- xs | Boolean | false | Hidden on extra small devices. sm | Boolean | false | Hidden on small devices. md | Boolean | false | Hidden on medimum devices. lg | Boolean | false | Hidden on large devices. xl | Boolean | false | Hidden on extra large devices. xxl | Boolean | false | Hidden on double extra large devices.

ScreenClass

Name | Type | Default | Description :--- | :--- | :------ | :---------- render | Function(screenClass) | | The render function that returns a React element.

License

MIT