Show

A utility component for conditionally rendering content based on a truthy condition.

Usage

Provides a declarative way to conditionally render content. When the when prop is truthy, the children are rendered. When falsy, the optional fallback is shown instead.

import { Show } from "@elemnts-ui/react"

<Show when={isLoggedIn} fallback={<p>Please log in.</p>}>
  <p>Welcome back!</p>
</Show>

Examples

Fallback

The fallback prop allows you to render alternative content when the condition is falsy.

Render Function

Children can be a function that receives the unwrapped truthy value. This avoids intermediate variables and keeps the rendering logic colocated.

Nested Conditions

The components can be nested to handle complex conditional rendering scenarios.

API Reference

Prop	Type	Default
when	`T \| null \| undefined`	-
fallback	`ReactNode`	-
children	`ReactNode \| ((props: T) => ReactNode)`	-