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.