Show for Solid

Conditionally render content based on a boolean value.

PreviewCode

Installation

Free with an account. It carries your token, so the CLI installs everything in one go.

Google GitHub

Use email insteadNo credit card

Usage

import React from "react";
import {
  NumberInput, NumberInputDecrement, NumberInputGroup,
  NumberInputIncrement, NumberInputInput,
} from "@/components/ui/number-input";
import { Show } from "@/components/ui/show";

const ShowDemo = () => {
  const [value, setValue] = React.createSignal(0);

  const isGreaterThan2 = value > 2;

  return (
    <div class="flex max-w-48 flex-col gap-4 text-center text-sm">
      <NumberInput
        min={0}
        onValueChange={({ value }) => setValue(Number(value))}
      >
        <NumberInputGroup>
          <NumberInputDecrement />
          <NumberInputInput />
          <NumberInputIncrement />
        </NumberInputGroup>
      </NumberInput>

      <Show fallback={<Fallback />} when={isGreaterThan2}>
        <Content />
      </Show>
    </div>
  );
};

const Fallback = () => (
  <p class="text-muted-foreground">Not there yet. Keep clicking...</p>
);

const Content = () => <p class="text-success">Your got it!</p>;

Accessibility

Arrow Up: Move up.
Arrow Down: Move down.
Home: Go to the start.
End: Go to the end.
Enter: Activate the focused item.
Space: Activate the focused control.

API Reference

Show

PropType

childrenJSX.Element

Content to render when when is truthy.

whenboolean

When truthy, renders children. When falsy, renders fallback.

fallback?JSX.Element

Content to render when when is falsy.