Utility that lets you hide content responsively with server-side rendering support.
import { Hidden } from "@uicapsule/components";
import type { HiddenProps } from "@uicapsule/components";

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 s and m 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