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 '@vortex-kit/vortex';
import type { VisibilityProps } from '@vortex-kit/vortex';

Display

<Visibility hide={{ xs: true, sm: true, md: false, lg: true }}>
  {children}
</Visibility>

Visibility

Prop
Type
Default
as
keyof React.JSX.IntrinsicElements
div
children
union
hide
boolean
invisible
boolean
Visibility Utility Props — Vortex Design System