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

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

import { For } from "control-flow-react";
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>
);

interface iForProps {
	each: any[] | undefined | null;
	children: (item: any, index: number) => any;
	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 "control-flow-react";

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

interface iShowProps {
    when: boolean | number | string | any | undefined;;
    children: ReactNode | string | null;
    fallBack?: ReactNode | string | null;
}
const 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>

import { Switch, Case } from "control-flow-react";

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 values props for multiple match scenarios */}
		<Case values={["UserNotFound", "LoginError", "WrongPass"]}>
			<ErrorComponent err={err} />
		</Case>
	</Switch>
);

type ConditionClause = boolean | number | string | any | undefined;
interface iSwitchProps {
	when: ConditionClause;
	children: ReactNode;
	fallBack: string | ReactNode | null;
}
const Switch: (props: iSwitchProps) => ReactNode | null;
interface iCaseProps {
	children: ReactNode;
	value: ConditionClause;
	values?: ConditionClause[];
}
const Case: ({ children }: iCaseProps) => ReactNode | null;