typesafe-react
v5.1.0
Published
## Functions
Downloads
252
Maintainers
Readme
Framework agnostic functions, hooks and components.
Functions
when
Exhaustive switch statement with return value.
// handle all cases
const result1 = when(AorB, { A: () => 'a', B: () => 'b' });
// provide a fallback
const result2 = when(ABC, { A: () => 'a', B: () => 'b' }, () => 'abc');
// run some code
when(AorB, { A: () => console.log('a'), B: () => console.log('b') });
// even simpler
console.log(when(AorB, { A: () => 'a', B: () => 'b' }));
| Parameter | Type | Description |
| ------------ | --------------------- | ----------------------------------------------------------------------------------------------------------- |
| expression
| E
| Expression to evaluate. |
| cases
| Record<CE, () => R>
| Record that maps some or all possible values of expression
to a branch. |
| fallback
| (() => F) \| never
| Default branch. Mandatory (and only allowed) if cases
does not cover all possible values of expression
. |
| Generic Type | Extends | Description |
| ------------ | ------------------ | --------------------------------------------------------- |
| E
| string \| number
| expression
's type. Union of strings or numbers. |
| CE
| E
| Union of covered cases
. Subunion of E
or same as E
. |
| const R
| unknown
| Union of return values. |
| const F
| unknown
| Fallback value. |
switchTrue
Switch true statement with return value.
const result = switchTrue(
[
[() => isA(), () => 'a'],
[() => isB(), () => 'b'],
],
() => 'c'
);
| Parameter | Type | Description |
| ---------- | ------------------------ | ---------------------------------------------------------------------------------------------------------------------------- |
| cases
| ReadonlyArray<C>
| Array of tuples. Each tuple has a callback that returns a condition and a callback that will run if the condition is truthy. |
| fallback
| (() => F) \| undefined
| Default branch. |
| Generic Type | Extends | Description |
| ------------ | -------------------------------- | ---------------------------------------- |
| const C
| [() => unknown, () => unknown]
| Tuple of condition and result callbacks. |
| const F
| unknown
| Fallback value. |
Components
When
Exhaustive switch component.
// handle all cases
const result1 = <When expression={AorB} cases={{ A: () => <A />, B: () => <B /> }} />;
// provide a fallback
const result2 = (
<When expression={ABC} cases={{ A: () => <A />, B: () => <B /> }} fallback={() => <Abc />} />
);
| Prop | Type | Description |
| ------------ | ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
| expression
| E
| Expression to evaluate. |
| cases
| Record<CE, () => ReactNode>
| Record that maps some or all possible values of expression
to a branch that returns content. |
| fallback
| (() => ReactNode) \| never
| Default branch that returns content. Mandatory (and only allowed) if cases
does not cover all possible values of expression
. |
| Generic Type | Extends | Description |
| ------------ | ------------------ | --------------------------------------------------------- |
| E
| string \| number
| expression
's type. Union of strings or numbers. |
| CE
| E
| Union of covered cases
. Subunion of E
or same as E
. |
SwitchTrue
Switch true component.
const result = (
<SwitchTrue
cases={[
[() => isA(), () => <A />],
[() => isB(), () => <B />],
]}
fallback={() => <Fallback />}
/>
);
| Prop | Type | Description |
| ---------- | ------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| cases
| ReadonlyArray<[() => unknown, () => ReactNode]>
| Array of tuples. Each tuple has a callback that returns a condition and a callback that will run if the condition is truthy and return content. |
| fallback
| (() => ReactNode) \| undefined
| Default branch that returns content. |
Show
Component to conditionally render content.
// simple check
const result1 = (
<Show when={show} fallback={`I am visible if 'show' is falsy.`}>
I am visible if 'show' is truthy.
</Show>
);
// multiple conditions
const result1 = <Show when={[show, !hidden]}>I am visible if all conditions are truthy.</Show>;
// use when's value
const result2 = <Show when={nullableArray}>{(data) => data.length}</Show>;
// use whenAll's values
const result2 = (
<Show when={[nullableArray, nullableObject]} fallback={'Something went wrong!'}>
{([array, object]) => array.length + object.numberProperty}
</Show>
);
| Prop | Type | Description |
| ---------- | ----------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| when
| W
| Single condition to evaluate. |
| whenAll
| T
| Multiple conditions to evaluate. |
| fallback
| ReactNode
| Content to render if when
is falsy or whenAll
contains some falsy elements. |
| children
| ReactNode \| ((data: NoInfer<IsEqual<W, never> extends true ? NonNullableElements<T> : NonNullable<W>>) => ReactNode)
| Children callback that receives when
or whenAll
and returns content to render if when
is truthy or whenAll
only contains truthy elements. |
| Generic Type | Extends | Description |
| ------------ | ------------------------ | -------------------------------------- |
| W
| unknown
| when
's type. Single condition. |
| const T
| ReadonlyArray<unknown>
| whenAll
's type. Tuple of conditions. |
For
Component for rendering lists.
const result = (
<For each={array} keyFn={(item) => item.id} fallback={`The array is empty.`}>
{(item, index) => `#${index} ${item.value}`}
</For>
);
| Prop | Type | Description |
| ---------- | ------------------------------------------------ | ---------------------------------------------------------------------------- |
| each
| ReadonlyArray<I>
| Array to iterate over. |
| keyFn
| (item: NoInfer<I>, index: number) => Key
| Function that returns the key for each item. |
| children
| (item: NoInfer<I>, index: number) => ReactNode
| Function that returns the content for each item. No need to define key here. |
| fallback
| ReactNode
| Content to render if each
is empty. |
| Generic Type | Extends | Description |
| ------------ | ---------------------- | ------------------------ |
| I
| NonNullable<unknown>
| each
's elements' type. |