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 example
import 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 be display: block when 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.