npm add @react-control/flow
yarn add @react-control/flow
bun add @react-control/flow
import { ReactNode, FC } from 'react'
type TruthyValue<T> = NonNullable<Exclude<T, false | 0>>
export type ShowProps<T> = {
when: T
fallback?: ReactNode | ReactNode[]
children: FC<TruthyValue<T>> | ReactNode | ReactNode[]
}
Component that renders children
for each item in the of
prop.
This component is similar to Array.prototype.map
method.
import { ReactNode } from 'react'
type OrNull<T> = T | null
export type ForProps<T> = {
of: OrNull<T[] | readonly T[]>
children: (item: T, index?: number) => ReactNode | ReactNode[]
keyMapper?: (item: T, index?: number) => string | number
loading?: boolean
slots?: {
loading?: ReactNode | ReactNode[]
empty?: ReactNode | ReactNode[]
}
}
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.
import { ReactNode } from 'react'
type SwitchMapProps<T extends string> = {
case: T
default?: ReactNode | ReactNode[]
children: Partial<Record<T, ReactNode | ReactNode[]>>
}