Show

Show is a declarative component for conditional rendering. When when is truthy it renders children; otherwise it renders the fallback (or nothing). This keeps branching logic out of JSX and makes intent explicit.

// Basic usage
function Show<T>(props: {
  when: T;
  children: React.ReactNode | ((value: NonNullable<T>) => React.ReactNode);
  fallback?: React.ReactNode;
}): React.ReactNode;

// Array condition
function Show<T extends Array<unknown>>(props: {
  when: T;
  children: React.ReactNode | ((values: NonNullableElements<T>) => React.ReactNode);
  fallback?: React.ReactNode;
}): React.ReactNode;

Basic usage#

Pass a condition to when and optionally provide fallback. If children is a function, it receives the evaluated value at render time.

import { Show } from '@ilokesto/utilinent';

function UserProfile({ user }) {
  return (
    <Show when={user} fallback={<div>Login required.</div>}>
      {(user) => <h1>Welcome, {user.name}!</h1>}
    </Show>
  );
}

Multiple conditions (array)#

If you pass an array to when, children render only when every item is truthy. The function child receives the array values.

<Show when={[user, user.isActive, user.hasPermission]}>
  {([user, isActive, hasPermission]) => (
    isActive && hasPermission ? <Profile user={user} /> : null
  )}
</Show>

DOM-preserving variants#

Use Show.div or Show.span to keep an outer element in the DOM while swapping inner content.

// Without element variant
<div className="badge">
  <Show when={user.isAdmin} fallback="user">
    admin
  </Show>
</div>

// With element variant
<Show.div when={user.isAdmin} className="badge" fallback="user">
  admin
</Show.div>