@solid-primitives/match

Control-flow components for matching discriminated union (tagged union) members and union literals.

Installation

npm install @solid-primitives/match
# or
yarn add @solid-primitives/match
# or
pnpm add @solid-primitives/match

MatchTag

Control-flow component for matching discriminated union (tagged union) members.

How to use it

type MyUnion = {
  type: "foo",
  foo:  "foo-value",
} | {
  type: "bar",
  bar:  "bar-value",
}

const [value, setValue] = createSignal<MyUnion>({type: "foo", foo: "foo-value"})

<MatchTag on={value()} case={{
  foo: v => <>{v().foo}</>,
  bar: v => <>{v().bar}</>,
}} />

Changing the tag key

The default tag key is "type", but it can be changed with the tag prop:

type MyUnion =
  | {
      kind: "foo";
      foo: "foo-value";
    }
  | {
      kind: "bar";
      bar: "bar-value";
    };

<MatchTag
  on={value()}
  tag="kind"
  case={{
    foo: v => <>{v().foo}</>,
    bar: v => <>{v().bar}</>,
  }}
/>;

Partial matching

Use the partial prop to only handle some of the union members:

<MatchTag
  partial
  on={value()}
  case={{
    foo: v => <>{v().foo}</>,
    // bar case is not handled
  }}
/>

Fallback

Provide a fallback element when no match is found or the value is null/undefined:

<MatchTag
  on={value()}
  case={{
    foo: v => <>{v().foo}</>,
    bar: v => <>{v().bar}</>,
  }}
  fallback={<div>No match found</div>}
/>

MatchValue

Control-flow component for matching union literals.

How to use it

type MyUnion = "foo" | "bar";

const [value, setValue] = createSignal<MyUnion>("foo");

<MatchValue
  on={value()}
  case={{
    foo: () => <p>foo</p>,
    bar: () => <p>bar</p>,
  }}
/>;

Partial matching

Use the partial prop to only handle some of the union members:

<MatchValue
  partial
  on={value()}
  case={{
    foo: () => <p>foo</p>,
    // bar case is not handled
  }}
/>

Fallback

Provide a fallback element when no match is found or the value is null/undefined:

<MatchValue
  on={value()}
  case={{
    foo: () => <p>foo</p>,
    bar: () => <p>bar</p>,
  }}
  fallback={<div>No match found</div>}
/>

Demo

Deployed example | Source code

Changelog

See CHANGELOG.md