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.
npm install control-flow-reactIterates 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 and the source array that was sent
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, allStats) => (
<div>
{index + 1} - {country.name} - has won {country.trophies} trophies
- from the total list of countries - {allStats.length}
</div>
)}
</For>
);interface iForProps {
each: any[] | undefined | null;
children: (item: any, index: number, sourceArray: any[]) => any;
emptyState?: ReactNode | string | null;
}
const For: ({ each, children, emptyState }: iForProps) => ReactNode | null;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;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;
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent