Control Flow React

Control Flow React is a lightweight package that provides minimal control flow components for React. 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
• Iteratives
  • For
• Conditional
  • Show
  • Switch

Differences

Installation

1npm install control-flow-react

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 "control-flow-react";
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);

1interface iForProps {
2	each: any[] | undefined | null;
3	children: (item: any, index: number) => any;
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 "control-flow-react";
2
3let loggedIn = true;
4return (
5	<Show when={loggedIn} fallBack={<Button>LogIn</Button>}>
6		<Button>Logout</Button>
7	</Show>
8);

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

Switch

Renders first matching <Case> if its props value or values 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 values props in <Case> to match any one among them.
> <Case> should be direct child for <Switch>

1import { Switch, Case } from "control-flow-react";
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 values props for multiple match scenarios */}
13		<Case values={["UserNotFound", "LoginError", "WrongPass"]}>
14			<ErrorComponent err={err} />
15		</Case>
16	</Switch>
17);

1type ConditionClause = boolean | number | string | any | undefined;
2interface iSwitchProps {
3	when: ConditionClause;
4	children: ReactNode;
5	fallBack: string | ReactNode | null;
6}
7const Switch: (props: iSwitchProps) => ReactNode | null;
8interface iCaseProps {
9	children: ReactNode;
10	value: ConditionClause;
11	values?: ConditionClause[];
12}
13const Case: ({ children }: iCaseProps) => ReactNode | null;