Hide#

Import#

import { Hide } from 'bumbag-native';

Usage#

The <Hide> component can be used to hide elements on the screen above or below a particular breakpoint, but show them otherwise.

Breakpoints can be referenced here.

<Hide below="lg">
  <Text>This should hide on viewports below lg width (768px).</Text>
</Hide>
<Hide above="lg">
  <Text>This should hide on viewports above or equal to lg width (768px).</Text>
</Hide>

<Hide below="lg" direction="height">
  <Text>This should hide on viewports below lg height (736px).</Text>
</Hide>
<Hide above="lg" direction="height">
  <Text>This should hide on viewports above or equal to lg height (736px).</Text>
</Hide>

Props#

Hide Props#

above string

below string

direction "height" | "width"

children Required

string
  | number
  | boolean
  | {}
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<...>)>
  | ReactNodeArray
  | ReactPortal