Show

<Show> is used for conditional rendering. It renders its children when the provided value is truthy, and renders the fallback when the (unwrapped) value is falsy.

When the value you pass to <Show> is a Signal, the component subscribes to it. This means that updates to the signal only affect the part of the tree controlled by <Show>, without forcing the parent component to re-render.

Props

• when^*: the value (or signal) that controls whether the children are shown.

• fallback: optional JSX rendered when the unwrapped when value is falsy.

• children: can be either a JSX.Element or a function of type (value: Truthy<T>) => JSX.Element, which receives the unwrapped, truthy value.

Example

import { Show, signal } from "kiru"

type User = {
  name: string
}

function App() {
  const user = signal<User | null>(null)

  const login = () => {
    user.value = { name: "Alice" }
  }

  const logout = () => {
    user.value = null
  }

  return () => (
    <Show when={user} fallback={<button onclick={login}>Log in</button>}>
      {(currentUser) => (
        // ^ currentUser is type User
        <div>
          <p>Hello, {currentUser.name}</p>
          <button onclick={logout}>Log out</button>
        </div>
      )}
    </Show>
  )
}