Show

Show is a component for expressing conditional rendering in a declarative and readable way. In React, inline ternaries (? :) or logical operators (&&) frequently clutter JSX and obscure intent; Show replaces those with a clear API. When the when prop is truthy, children are rendered; when it is falsy, the fallback is shown. This makes conditional UI intent explicit and easier to maintain.

// Basic usage
function Show<T>(props: {
  when: T | null | undefined | false;
  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#

In the simplest form, pass a condition to when and optionally provide fallback. If you pass children as a function, you receive the evaluated value in a type-safe way 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 will only render when every element of the array is truthy. The children receive the array values, so destructure them to perform checks and render accordingly.

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

DOM-preserving variants#

Use variants like Show.div or Show.span when you want the outer DOM node to always exist while swapping the inner content. This preserves layout and prevents CSS from breaking when content appears or disappears.

// 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>

Showable#

Showable is a special component used inside Show that is useful for mixing static and conditional content. While Show.div always renders, only the Showable inside it renders conditionally based on the when prop. This allows you to maintain fixed elements like headers or footers while conditionally displaying specific parts.

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

function UserProfile({ user }) {
  return (
    <Show.div when={user} className="profile">
      <h1>User Profile</h1>
      <Showable fallback={<div>Please login to view profile.</div>}>
        {(user) => (
          <>
            <p>Name: {user.name}</p>
            <p>Email: {user.email}</p>
          </>
        )}
      </Showable>
    </Show.div>
  );
}