@react-control/flow

• Installation
• Provided components
  • Show
  • For
  • SwitchMap

Installation:

1npm add @react-control/flow

1yarn add @react-control/flow

1bun add @react-control/flow

Provided components:

Show

1import { ReactNode, FC } from 'react'
2
3type TruthyValue<T> = NonNullable<Exclude<T, false | 0>>
4
5export type ShowProps<T> = {
6  when: T
7  fallback?: ReactNode | ReactNode[]
8  children: FC<TruthyValue<T>> | ReactNode | ReactNode[]
9}

For

Component that renders children for each item in the of prop. This component is similar to Array.prototype.map method.

1import { ReactNode } from 'react'
2
3type OrNull<T> = T | null
4
5export type ForProps<T> = {
6  of: OrNull<T[] | readonly T[]>
7  children: (item: T, index?: number) => ReactNode | ReactNode[]
8  keyMapper?: (item: T, index?: number) => string | number
9  loading?: boolean
10  slots?: {
11    loading?: ReactNode | ReactNode[]
12    empty?: ReactNode | ReactNode[]
13  }
14}

SwitchMap

Conditional rendering component that renders some of the children depending on the case prop. Also, you can use default prop to render something while case is not equal to any key of the children object.

1import { ReactNode } from 'react'
2
3type SwitchMapProps<T extends string> = {
4  case: T
5  default?: ReactNode | ReactNode[]
6  children: Partial<Record<T, ReactNode | ReactNode[]>>
7}