Show#

Import#

import { Show } from 'bumbag-native';

Usage#

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

Breakpoints can be referenced here.

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

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

Props#

Show 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