An object of branches. The key is the value to compare the property with and the value is a function that accepts the type narrowed object and returns an Element.
The property of the object to select a branch based on.
The object cell to pass to the selected branch.
type MyTaggedUnion = {
type: 'num',
num: number,
} | {
type: 'str',
str: string,
};
const a = cell<MyTaggedUnion>({type: 'num', num: 5});
<Switch with={a} on='type'>{{
'num': a => <span>The number is {a.props.num}</span>,
'str': a => <span>The string is {a.props.str}</span>,
}}</Switch>
Same as above but does not require a branch for every variation of the input type.
An object of branches. The key is the value to compare the property with and the value is a function that accepts the type narrowed object and returns an Element.
Alternative element to render when none of the branches
provided in props.children match the input.
The property of the object to select a branch based on.
The object cell to pass to the selected branch.
A simple switch without type narrowing for use with enums. The variant
without an else-property does implement exhaustiveness checking.
type MyEnum = 'foo' | 'bar';
const a = cell<MyEnum>('foo');
<Switch on={a}>{{
'foo': <span>a is foo</span>,
'bar': <span>a is bar</span>,
}}</Switch>
Same as above but does not require a branch for every input.
An object of branches. The key is the value to compare the input value with and the value is an element.
Alternative element to render when none of the branches
provided in props.children match the input.
The value to select a branch based on.
A component that switches between different branches based on the value of a property on a cell. Designed for use with tagged unions and supports type narrowing. Checks for exhaustiveness when a default branch isn't provided via the
elseproperty.