Skip to content

<Show>

Render content when an expression is truthy.

import { Show } from "rvx";

<Show when={someCondition}>
    {() => <>Hello World!</>}
</Show>
import { Show } from "./rvx.js";

Show({
    when: someCondition,
    children: () => "Hello World!",
})

Truthy Results

Truthy condition results are passed to the child callback as the first argument.

const message = sig("Hello World!");

<Show when={message}>
    {value => <h1>{value}</h1>}
</Show>
const message = sig("Hello World!");

Show({
    when: message,
    children: value => e("h1").append(value),
})

Fallback

A function to render fallback content can be specified as the else property.

<Show when={message} else={() => <>No message.</>}>
    {value => <h1>{value}</h1>}
</Show>
Show({
    when: message,
    else: () => "No message.",
    children: value => e("h1").append(value),
})