Getting Started

Overview

Design Tokens

Overview

Color

Components

Utilities

Hooks

Hidden

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

Import

import { Hidden } from "@uicapsule/components";
import type { HiddenProps } from "@uicapsule/components";

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

Supports rendering content responsively based on the viewport size

Can be applied to other components without rendering an additional wrapper

Usage

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

Form control

Hidden visually