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 on s and m screen sizes

Hidden on l and xl screen sizes

Usage

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

Hidden

Shown

<>
  <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.

Visible on l and xl screens

<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>