React Grid System component
Demo: https://trendmicro-frontend.github.io/react-grid-system
- Install the latest version of react and react-grid-system:
npm install --save react @trendmicro/react-grid-system - At this point you can import
@trendmicro/react-grid-systemand 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';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';<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>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>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>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>Render content based on the screen class.
<ScreenClass> {screenClass => <div>{screenClass}</div>} </ScreenClass><ScreenClass render={screenClass => <div>{screenClass}</div> } />| 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. |
| 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. |
| Name | Type | Default | Description |
|---|
| 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. |
| 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. |
| Name | Type | Default | Description |
|---|---|---|---|
| render | Function(screenClass) | The render function that returns a React element. |
MIT