Skip to content

Commit 9aaea32

Browse files
authored
Update README.md
1 parent 859ddb8 commit 9aaea32

File tree

1 file changed

+34
-13
lines changed

1 file changed

+34
-13
lines changed

README.md

Lines changed: 34 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -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
4241
import '@trendmicro/react-grid-system/dist/react-grid-system.css';
4342
export {
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

5149
Then, import components like below:
5250
```jsx
5351
import {
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
193190
pull | { xs, sm, md, lg, xl, xxl } | | The amount this column is pulled to the left for all screen classes.
194191
push | { 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

198219
MIT

0 commit comments

Comments
 (0)