Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/trendmicro-frontend/react-grid-system
React Grid System component
https://github.com/trendmicro-frontend/react-grid-system
col container grid grid-system layout react responsive row
Last synced: 11 days ago
JSON representation
React Grid System component
- Host: GitHub
- URL: https://github.com/trendmicro-frontend/react-grid-system
- Owner: trendmicro-frontend
- License: mit
- Created: 2018-02-06T07:12:24.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2019-11-13T10:01:50.000Z (about 5 years ago)
- Last Synced: 2024-12-06T11:19:19.932Z (about 1 month ago)
- Topics: col, container, grid, grid-system, layout, react, responsive, row
- Language: JavaScript
- Homepage: https://trendmicro-frontend.github.io/react-grid-system/
- Size: 3.17 MB
- Stars: 9
- Watchers: 18
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome - react-grid-system - React Grid System component ([demo](https://trendmicro-frontend.github.io/react-grid-system/)). (Trend Micro / React Components)
- awesome_frontend_development_resources - react-grid-system - React Grid System component ([demo](https://trendmicro-frontend.github.io/react-grid-system/)). (Trend Micro / React Components)
- awesome_frontend_development_resources - react-grid-system - React Grid System component ([demo](https://trendmicro-frontend.github.io/react-grid-system/)). (Trend Micro / React Components)
README
# react-grid-system [](https://travis-ci.org/trendmicro-frontend/react-grid-system) [](https://coveralls.io/github/trendmicro-frontend/react-grid-system?branch=master)
[](https://nodei.co/npm/@trendmicro/react-grid-system/)
React Grid System component
Demo: https://trendmicro-frontend.github.io/react-grid-system
## Installation
1. Install the latest version of [react](https://github.com/facebook/react) and [react-grid-system](https://github.com/trendmicro-frontend/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:
```js
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**
```jsx
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:
```jsx
import {
Provider as GridSystemProvider,
Container, Row, Col,
Visible, Hidden
} from './components/GridSystem';
```
## Usage
```jsx
col-md-8
col-6 col-md-4
col-6 col-md-4
col-6 col-md-4
col-6 col-md-4
col-6
col-6
```
### Provider
You can wrap ``, ``, and `` in `` to pass grid system config through context.
```jsx
col
col
col
col
col
```
### 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.
```jsx
Hidden on extra small and small
Hidden on medium and large
```
#### Visible
Make an element visible when the viewport is at the given breakpoint.
```jsx
Visible on extra small
Visible on small
Visible on medium
Visible on large
Visible on extra large
Visible on double extra large
```
#### ScreenClass
Render content based on the screen class.
```jsx
{screenClass =>
{screenClass}}
```
```jsx
{screenClass} }
/>
```
## 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