Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/zayne-labs/ui/llms.txt

Use this file to discover all available pages before exploring further.

​
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

Build docs developers (and LLMs) love

Get started for freeTalk to us