Skip to main content

latest
Works with
This package works with Bun
It is unknown whether this package works with Cloudflare Workers
This package works with Node.js
It is unknown whether this package works with Deno
This package works with Browsers
JSR Score
35%
Published
2 months ago (1.0.2)

@react-control/flow Made in Ukraine

MIT License npm JSR open issues

Installation:

npm add @react-control/flow
yarn add @react-control/flow
bun add @react-control/flow

Provided components:

Show

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[]
}

For

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[]
  }
}

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.

import { ReactNode } from 'react'

type SwitchMapProps<T extends string> = {
  case: T
  default?: ReactNode | ReactNode[]
  children: Partial<Record<T, ReactNode | ReactNode[]>>
}

Add Package

deno add @react-control/flow

Import symbol

import * as mod from "@react-control/flow";

Add Package

npx jsr add @react-control/flow

Import symbol

import * as mod from "@react-control/flow";

Add Package

yarn dlx jsr add @react-control/flow

Import symbol

import * as mod from "@react-control/flow";

Add Package

pnpm dlx jsr add @react-control/flow

Import symbol

import * as mod from "@react-control/flow";

Add Package

bunx jsr add @react-control/flow

Import symbol

import * as mod from "@react-control/flow";