Typesafe-react NPM

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.