Visibility

Component manages responsive visibility and optimizes SSR by using CSS for hiding content, avoiding potential hydration issues. It effectively hides content across various screen sizes.

Import

import { Visibility } from '@vortexlabs/vortex';
import type { VisibilityProps } from '@vortexlabs/vortex';

Display

<Visibility hidden={{ xs: false, md: true }}>{children}</Visibility>

Other links

Storybook

Documentation

Properties

Component properties
Prop	Type	Default
`children`	`React.ReactNode`	No default value
`hidden`	`boolean`	`false`
`spacePreserved`	`boolean`	`false`
`as`	`keyof React.JSX.IntrinsicElements`	`"div"`