@@ -19,9 +19,8 @@ Demo: https://trendmicro-frontend.github.io/react-grid-system
1919 ``` js
2020 import {
2121 Provider as GridSystemProvider ,
22- Container ,
23- Row ,
24- Col
22+ Container , Row , Col ,
23+ Visible , Hidden
2524 } from ' @trendmicro/react-grid-system' ;
2625
2726 // Be sure to include styles at some point, probably during your bootstraping
@@ -41,20 +40,18 @@ components/
4140``` jsx
4241import ' @trendmicro/react-grid-system/dist/react-grid-system.css' ;
4342export {
44- Provider ,
45- Container ,
46- Row ,
47- Col
43+ Provider ,
44+ Container , Row , Col ,
45+ Visible , Hidden
4846} from ' @trendmicro/react-grid-system' ;
4947```
5048
5149Then, import components like below:
5250``` jsx
5351import {
54- Provider as GridSystemProvider ,
55- Container ,
56- Row ,
57- Col
52+ Provider as GridSystemProvider ,
53+ Container , Row , Col ,
54+ Visible , Hidden
5855} from ' ./components/GridSystem' ;
5956```
6057
@@ -106,7 +103,7 @@ You can wrap `<Container />`, `<Row />`, and `<Col />` in `<Provider />` to pass
106103< / Provider>
107104```
108105
109- ### Visible Component
106+ ### Visible
110107
111108``` jsx
112109< Visible xs>
@@ -129,7 +126,7 @@ You can wrap `<Container />`, `<Row />`, and `<Col />` in `<Provider />` to pass
129126< / Visible>
130127```
131128
132- ### Hidden Component
129+ ### Hidden
133130
134131``` jsx
135132< Hidden xs sm>
@@ -193,6 +190,30 @@ offset | { xs, sm, md, lg, xl, xxl } | | The offset of this column for all scree
193190pull | { xs, sm, md, lg, xl, xxl } | | The amount this column is pulled to the left for all screen classes.
194191push | { xs, sm, md, lg, xl, xxl } | | The amount this column is pushed to the right for all screen classes.
195192
193+ #### Visible
194+
195+ Name | Type | Default | Description
196+ :--- | :--- | :------ | :----------
197+ xs | Boolean | false | Visible on extra small devices.
198+ sm | Boolean | false | Visible on small devices.
199+ md | Boolean | false | Visible on medimum devices.
200+ lg | Boolean | false | Visible on large devices.
201+ xl | Boolean | false | Visible on extra large devices.
202+ xxl | Boolean | false | Visible on double extra large devices.
203+ onResize | Function({ screenClass }) | | A callback fired when the resize event occurs.
204+
205+ #### Hidden
206+
207+ Name | Type | Default | Description
208+ :--- | :--- | :------ | :----------
209+ xs | Boolean | false | Hidden on extra small devices.
210+ sm | Boolean | false | Hidden on small devices.
211+ md | Boolean | false | Hidden on medimum devices.
212+ lg | Boolean | false | Hidden on large devices.
213+ xl | Boolean | false | Hidden on extra large devices.
214+ xxl | Boolean | false | Hidden on double extra large devices.
215+ onResize | Function({ screenClass }) | | A callback fired when the resize event occurs.
216+
196217## License
197218
198219MIT
0 commit comments