`@commonkit/conditional`

@commonkit/conditional is a small React package for declarative conditional rendering.

It gives you explicit JSX primitives instead of sprinkling inline && checks and nested ternaries through UI code.

Install

npm install @commonkit/conditional

yarn add @commonkit/conditional

pnpm add @commonkit/conditional

bun add @commonkit/conditional

react is a peer dependency and needs to be available in the consuming app.

Import

import { If, Switch } from "@commonkit/conditional";

Quick example

import { If, Switch } from "@commonkit/conditional";

type Status = "idle" | "loading" | "success" | "error";

type Props = {
  isLoggedIn: boolean;
  status: Status;
};

export function DashboardState({ isLoggedIn, status }: Props) {
  return (
    <>
      <If condition={isLoggedIn}>
        <p>Welcome back.</p>
      </If>

      <Switch>
        <Switch.Case condition={status === "loading"}>
          <p>Loading...</p>
        </Switch.Case>

        <Switch.Case condition={status === "success"}>
          <p>Saved successfully.</p>
        </Switch.Case>

        <Switch.Case condition={status === "error"}>
          <p>Something went wrong.</p>
        </Switch.Case>

        <Switch.Default>
          <p>Ready.</p>
        </Switch.Default>
      </Switch>
    </>
  );
}

`If`

Use If when you want a small, explicit rendering gate around JSX.

import { If } from "@commonkit/conditional";

type Props = {
  isLoggedIn: boolean;
};

export function WelcomeMessage({ isLoggedIn }: Props) {
  return (
    <If condition={isLoggedIn}>
      <p>Welcome back.</p>
    </If>
  );
}

`If` API

type IfProps = {
  condition: boolean;
  children?: React.ReactNode;
};

`Switch`

Use Switch when multiple conditions compete and you want the first match to win.

import { Switch } from "@commonkit/conditional";

type Status = "idle" | "loading" | "success" | "error";

type Props = {
  status: Status;
};

export function StatusView({ status }: Props) {
  return (
    <Switch>
      <Switch.Case condition={status === "loading"}>
        <p>Loading...</p>
      </Switch.Case>

      <Switch.Case condition={status === "error"}>
        <p>Something went wrong.</p>
      </Switch.Case>

      <Switch.Case condition={status === "success"}>
        <p>Saved successfully.</p>
      </Switch.Case>

      <Switch.Default>
        <p>Ready.</p>
      </Switch.Default>
    </Switch>
  );
}

If more than one case evaluates to true, the first matching case is rendered.

`Switch.Case` API

type SwitchCaseProps = {
  condition: boolean;
  children?: React.ReactNode;
};

`Switch.Default` API

type SwitchDefaultProps = {
  children?: React.ReactNode;
};

Rules and Notes

Switch is intentionally strict so branch handling stays obvious.

Switch must contain at least one Switch.Case
Switch must contain exactly one Switch.Default
Switch only accepts Switch.Case and Switch.Default as direct children
if multiple cases are true, the first matching case is rendered

The order of cases matters. Put the highest-priority branch first so the result is predictable.

Conditional Package