A lightweight React utility components library inspired by Solid.js.
Includes components like Switch, Match, Show, Dynamic, and For — enabling expressive and declarative UI patterns in React.
- 🧩 Simple
Switch/Matchcontrol flow components - 👁️
Showcomponent for conditional rendering - 🔄
Dynamiccomponent for dynamic component instantiation - 🔁
Forcomponent for declarative iteration - 🪶 Small bundle size, no dependencies
- 🦄 TypeScript support
npm install @kudo/toolboxor
yarn add @kudo/toolboximport { Switch, Match } from '@kudo/toolbox';
function Example({ value }: { value: number }) {
return (
<Switch>
<Match when={value === 1}>One</Match>
<Match when={value === 2}>Two</Match>
<Match when={value === 3}>Three</Match>
</Switch>
);
}import { Show } from '@kudo/toolbox';
function Example({ loggedIn }: { loggedIn: boolean }) {
return (
<Show when={loggedIn}>
<p>Welcome back!</p>
</Show>
);
}import { Dynamic } from '@kudo/toolbox';
const components = {
one: () => <div>Component One</div>,
two: () => <div>Component Two</div>,
};
function Example({ type }: { type: 'one' | 'two' }) {
const Component = components[type];
return <Dynamic component={Component} />;
}import { For } from '@kudo/toolbox';
function Example() {
const items = ['Apple', 'Banana', 'Cherry'];
return (
<For each={items}>
{(item, index) => (
<div key={index}>
{index + 1}. {item}
</div>
)}
</For>
);
}Renders the first <Match> whose when prop evaluates to true.
- when (boolean | ReactElement | undefined): The condition to match.
- when (boolean | ReactElement | undefined): The condition to show the children.
- component (React component): The component to dynamically render.
- each (array): The array to iterate over.
- children (function): A render function of the form
(item, index) => ReactNode.
MIT
Inspired by Solid.js control flow components.