Control Flow React

Control Flow React is a lightweight package that provides minimal control flow components for React with typescript. These components are inspired by Solid.js are designed to help developers refactor code in a declarative format that is more cleaner and easier to read or review.

Contents

• Difference
• Installation
• Iterative
  • For
• Conditional
  • Show
  • Switch

Differences

Installation

1npm install @prt-ts/react-control-flow

Iteratives

For

Iterates over an array provided in each prop and renders the children function. If the array is empty or falsy, then the fallback prop is rendered.

Note: 'children' will be a function that receives in each iteration item and index
eg: (item, index) => <div> {index} - {item </div>

1import { For } from '@prt-ts/react-control-flow';
2let stats = [
3  { name: 'Argentina', trophies: 3 },
4  { name: 'France', trophies: 2 },
5  { name: 'Brazil', trophies: 5 },
6];
7return (
8  <For each={stats}>
9    {(country, index) => (
10      <div>
11        {index + 1} - {country.name} - {country.trophies}
12      </div>
13    )}
14  </For>
15);

1type ForProps<TItem extends RowData> = {
2  each: TItem[] | undefined | null;
3  children: (item: TItem, index: number) => JSX.Element;
4  emptyState?: ReactNode | string | null;
5};
6const For: ({ each, children, emptyState }: iForProps) => ReactNode | null;

Conditionals

Show

Conditionally renders children or fallback based on condition provided to when prop.

1import { Show } from '@prt-ts/react-control-flow';
2
3let loggedIn = true;
4return (
5  <Show when={loggedIn} fallback={<Button>LogIn</Button>}>
6    <Button>Logout</Button>
7  </Show>
8);

1type ShowProps = {
2    when: boolean | number | string | any | undefined;;
3    children: ReactNode | string | null;
4    fallback?: ReactNode | string | null;
5}
6const Show: ({ when, children, fallback }: ShowProps) => ReactNode | null;

Switch

Renders first matching <Case> if its props _value matches with condition provided in when prop to <Switch> component and if none of them matches _fallback_ will be rendered.

Note: Pass an array to value props in <Case> to match any one among them.
> <Case> should be direct child for <Switch>

1import { Switch, Case } from '@prt-ts/react-control-flow';
2
3let { status, err } = await fetch(url).catch();
4return (
5  <Switch when={status} fallback={<div>Default Component</div>}>
6    <Case value={'LoggedIn'}>
7      <DashboardComponent />
8    </Case>
9    <Case value={'LoggedOut'}>
10      <LoginComponent />
11    </Case>
12    {/* use value props for multiple match scenarios but it has to be array type */}
13    <Case value={['UserNotFound', 'LoginError', 'WrongPass']}>
14      <ErrorComponent err={err} />
15    </Case>
16  </Switch>
17);

1type ConditionClause = boolean | number | string | any | undefined;
2type SwitchProps = {
3  when: ConditionClause;
4  children: ReactNode;
5  fallback: string | ReactNode | null;
6};
7const Switch: (props: SwitchProps) => ReactNode | null;
8type CaseProps = {
9  children: ReactNode;
10  value: ConditionClause | ConditionClause[];
11};
12const Case: ({ children }: CaseProps) => ReactNode | null;