Show

API reference for the Show component - conditionally render content with fallbacks.

Overview

The Show component provides a declarative way to conditionally render content with support for fallbacks. It offers two control modes: root-controlled and content-controlled rendering.

Import

import { Show } from "@zayne-labs/ui-react/common/show";
// or
import { ShowRoot, ShowContent, ShowFallback } from "@zayne-labs/ui-react/common/show";

Component Parts

Show.Root

The root component that controls conditional rendering

Show.Content

Defines content to show when a condition is met

Show.Fallback

Defines fallback content when no condition is met

Show.Otherwise

Alias for Show.Fallback

Show.Root

Root-Controlled Mode

when · false | TWhen | null | undefined · required

The condition to evaluate. When truthy, renders children. When falsy, renders fallback.

children · React.ReactNode | ((value: TWhen) => React.ReactNode) · required

Content to render when the condition is truthy. Can be a render function that receives the truthy value.

fallback · React.ReactNode

Content to render when the condition is falsy.

control · 'root' · default: "'root'"

Specifies root-controlled mode.

Content-Controlled Mode

control · 'content' · required

Specifies content-controlled mode where children determine what renders.

children · React.ReactNode · required

Must contain Show.Content components with when props.

fallback · React.ReactNode

Content to render when no content condition is met.

Show.Content

when · false | TWhen | null | undefined · required

The condition for this content block.

children · React.ReactNode | ((value: TWhen) => React.ReactNode) · required

Content to render when this condition is truthy.

Show.Fallback / Show.Otherwise

children · React.ReactNode · required

Fallback content to display.

Usage Examples

Basic Conditional Rendering

function UserGreeting({ user }) {
  return (
    <Show.Root when={user}>
      {(user) => <div>Welcome, {user.name}!</div>}
    </Show.Root>
  );
}

With Fallback

<Show.Root when={data} fallback={<p>No data available</p>}>
  {(data) => <DataDisplay data={data} />}
</Show.Root>

Using Show.Fallback Component

<Show.Root when={user}>
  {(user) => (
    <div>
      <h1>Welcome back!</h1>
      <p>Email: {user.email}</p>
    </div>
  )}
  <Show.Fallback>
    <p>Please log in to continue</p>
  </Show.Fallback>
</Show.Root>

Content-Controlled Mode

<Show.Root control="content">
  <Show.Content when={user?.role === 'admin'}>
    {(user) => <AdminPanel user={user} />}
  </Show.Content>
  
  <Show.Content when={user?.role === 'user'}>
    {(user) => <UserDashboard user={user} />}
  </Show.Content>
  
  <Show.Fallback>
    <LoginPrompt />
  </Show.Fallback>
</Show.Root>

Multiple Conditions

<Show.Root control="content">
  <Show.Content when={isLoading}>
    <Spinner />
  </Show.Content>
  
  <Show.Content when={error}>
    {(error) => <ErrorMessage error={error} />}
  </Show.Content>
  
  <Show.Content when={data}>
    {(data) => <DataTable data={data} />}
  </Show.Content>
  
  <Show.Otherwise>
    <EmptyState />
  </Show.Otherwise>
</Show.Root>

Static Children

<Show.Root when={isAuthenticated}>
  <Dashboard />
</Show.Root>

Nested Conditions

<Show.Root when={user}>
  {(user) => (
    <div>
      <h1>Profile</h1>
      <Show.Root when={user.avatar} fallback={<DefaultAvatar />}>
        {(avatar) => <img src={avatar} alt="Avatar" />}
      </Show.Root>
    </div>
  )}
</Show.Root>

Boolean Conditions

<Show.Root when={isOnline} fallback={<OfflineBanner />}>
  <OnlineFeatures />
</Show.Root>

Array or Object Checks

<Show.Root
  when={items.length > 0 && items}
  fallback={<EmptyList />}
>
  {(items) => (
    <ul>
      {items.map(item => <li key={item.id}>{item.name}</li>)}
    </ul>
  )}
</Show.Root>

First Match Wins

<Show.Root control="content">
  <Show.Content when={status === 'success'}>
    <SuccessMessage />
  </Show.Content>
  
  <Show.Content when={status === 'error'}>
    <ErrorMessage />
  </Show.Content>
  
  <Show.Content when={status === 'pending'}>
    <PendingMessage />
  </Show.Content>
  
  <Show.Fallback>
    <IdleState />
  </Show.Fallback>
</Show.Root>

Notes

• In root-controlled mode with a render function, the function receives the truthy value of when
• In content-controlled mode, the first Show.Content with a truthy when prop is rendered
• You cannot use both the fallback prop and Show.Fallback component simultaneously
• Show.Otherwise is an alias for Show.Fallback for semantic clarity
• The component narrows types when using render functions with TypeScript
• Content-controlled mode requires at least one Show.Content child