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

Supports rendering content responsively based on the viewport size

Can be applied to other components without rendering an additional wrapper

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

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

hide property supports responsive syntax, which means you can control the visibility based on the viewport size.

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

If you need to hide an element without adding any additional wrappers, you can use the render props approach with Hidden.

<Hidden hide={{ s: true, m: false }}>{(className) => <div className={className} />}</Hidden>

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

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