Hide

Utility component for easy responsive behavior.

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.