Control flow components for React
npm install control-flow-reactControl 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.
``sh`
npm install control-flow-react
Iterates over an array provided in each prop and renders the children function.fallBack
If the array is empty or falsy, then the prop is rendered.
> Note: 'children' will be a function that receives in each iteration item and
> index
eg: (item, index) =>
jsx
import { For } from "control-flow-react";
let stats = [
{ name: "Argentina", trophies: 3 },
{ name: "France", trophies: 2 },
{ name: "Brazil", trophies: 5 }
];
return (
{(country, index) => (
{index + 1} - {country.name} - {country.trophies}
)}
);
`tsx
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
$3
Conditionally renders
or fallBack based on condition provided to
when prop.`jsx
import { Show } from "control-flow-react";let loggedIn = true;
return (
LogIn}>
);
`tsx
interface iShowProps {
when: boolean | number | string | any | undefined;;
children: ReactNode | string | null;
fallBack?: ReactNode | string | null;
}
const Show: ({ when, children, fallBack }: iShowProps) => ReactNode | null;
`$3
Renders first matching
if its props _value_ or _values_ matches
with condition provided in _when_ prop to component and if none of them
matches _fallBack_ will be rendered.> Note: Pass an array to _values_ props in
to match any one among
> them.
> should be direct child for jsx
import { Switch, Case } from "control-flow-react";let { status, err } = await fetch(url).catch();
return (
Default Component
tsx
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;
``