@solid-primitives/match

@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