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

npm 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>

import { For } from '@prt-ts/react-control-flow';
let stats = [
  { name: 'Argentina', trophies: 3 },
  { name: 'France', trophies: 2 },
  { name: 'Brazil', trophies: 5 },
];
return (
  <For each={stats}>
    {(country, index) => (
      <div>
        {index + 1} - {country.name} - {country.trophies}
      </div>
    )}
  </For>
);

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

Conditionals

Show

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

import { Show } from '@prt-ts/react-control-flow';

let loggedIn = true;
return (
  <Show when={loggedIn} fallback={<Button>LogIn</Button>}>
    <Button>Logout</Button>
  </Show>
);

type ShowProps = {
    when: boolean | number | string | any | undefined;;
    children: ReactNode | string | null;
    fallback?: ReactNode | string | null;
}
const 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>

import { Switch, Case } from '@prt-ts/react-control-flow';

let { status, err } = await fetch(url).catch();
return (
  <Switch when={status} fallback={<div>Default Component</div>}>
    <Case value={'LoggedIn'}>
      <DashboardComponent />
    </Case>
    <Case value={'LoggedOut'}>
      <LoginComponent />
    </Case>
    {/* use value props for multiple match scenarios but it has to be array type */}
    <Case value={['UserNotFound', 'LoginError', 'WrongPass']}>
      <ErrorComponent err={err} />
    </Case>
  </Switch>
);

type ConditionClause = boolean | number | string | any | undefined;
type SwitchProps = {
  when: ConditionClause;
  children: ReactNode;
  fallback: string | ReactNode | null;
};
const Switch: (props: SwitchProps) => ReactNode | null;
type CaseProps = {
  children: ReactNode;
  value: ConditionClause | ConditionClause[];
};
const Case: ({ children }: CaseProps) => ReactNode | null;