Hide#

Import#

import { Hide } from 'bumbag';

Usage#

The <Hide> component can be used to visually hide elements from the screen.

Pass a below prop to hide the element(s) under a particular breakpoint, or pass an above hide to show element(s) above a particular breakpoint.

Try drag the viewport with the slider!

<Hide below="mobile">
  This should hide on viewports below mobile.
</Hide>
<Hide above="mobile">
  This should hide on viewports above or equal to mobile.
</Hide>

Note: The <Hide> component does not render an element wrapper, meaning it works well with layout components. It just adds hidden styles to each of it's children.

Props#

Hide Props#

above string

below string