Hidden

Utility that lets you hide content responsively with server-side rendering support.

Import

import { Hidden } from "reshaped";
import type { HiddenProps } from "reshaped";

Storybook

Hidden stories


<>
  <Hidden hide={{ s: true, l: false }}>Hidden on s and m screen sizes</Hidden>
  <Hidden hide={{ s: false, l: true }}>Hidden on l and xl screen sizes</Hidden>
</>

Usage

Hidden provides a way to hide content according to the passed value.


<>
  <Hidden hide={true}>Hidden</Hidden>
  <Hidden hide={false}>Shown</Hidden>
</>

The hide property supports responsive syntax, allowing you to control visibility based on the viewport size.


<Hidden hide={{ s: true, l: false }}>Visible on l and xl screens</Hidden>

To keep the space for the element reserved, use the visibility flag to toggle CSS visibility: hidden instead of display: none.


<Hidden hide={true} visibility>
  With reserved space
</Hidden>

Grid

Hidden visually