Cerberus Design System

1
import { Show } from '@cerberus-design/react'

When to use

When you need display components based on a single condition.

Usage

preview mode

When not to use

If you need to conditionally render components that have multiple outcomes, use the Switch/Match family. If you want to display a loading Skeleton, use the Suspense tag or loading route file (NextJS) instead.

API

export interface ShowProps {
  when: boolean | null | undefined
  fallback?: ReactNode
}

define function Show(props: ShowProps): ReactNode | null

Props

The Show component accepts the following props:

Name	Default	Description
when	false	The condition to evalue for showing the children or fallback.
fallback	null	The content to render when the condition is false.