Hide
To implement Hide component into your project you’ll need to add the import:
import Hide from "@kiwicom/orbit-components/lib/Hide";// and Button for exampleimport Button from "@kiwicom/orbit-components/lib/Button";
After adding import into your project you can use it simply like:
<Hide on={["smallMobile"]}><Button>Hello World!</Button></Hide>
Props
Table below contains all types of the props available in the Hide component.
| Name | Type | Description | 
|---|---|---|
| children | React.Node | The children to hide. | 
| on | enum[] | Array of devices - viewports to hide the children on. | 
| block | boolean | If true, the Hide component will bedisplay: blockwhen visible. | 
enum
| on | Applies from to width | 
|---|---|
| "largeDesktop" | 1200px - ∞ | 
| "desktop" | 992px - 1199px | 
| "tablet" | 768px - 991px | 
| "largeMobile" | 576px - 767px | 
| "mediumMobile" | 414px - 575px | 
| "smallMobile" | 0px - 413px | 
Functional specs
In case Separator is used inside Hide, block property has to be set to true to display.