A lightweight utility to handle dynamic UI display states like loading, error, or any custom-defined state — based on your app logic.
- 🧠 Declarative and expressive API
- 🔁 Dynamic state evaluation with conditions
- ✅ Fully customizable states and payloads
pnpm install @bearstudio/ui-state
npm install @bearstudio/ui-state
yarn add @bearstudio/ui-stateimport { getUiState } from "@bearstudio/ui-state";
const ui = getUiState((set) => {
if (bookQuery.status === "pending") return set("pending");
if (bookQuery.status === "error") return set("error");
return set("default", { book: bookQuery.data });
});Rendering in React
ui.match("pending", () => <>Loading...</>)
.match("error", () => <>Error</>)
.match("default", ({ book }) => <>{book.title}</>)
.exhaustive();const ui = getUiState((set) => {
if (booksToImport === null) return set("show-input");
if (booksToImport.length === 0) return set("empty");
return set("listing", { booksToImport });
});
ui.is("show-input"); // valid
ui.is("default"); // invalidui.is("pending"); // Return true if state is `pending`, false otherwiseui.when("pending", () => <>Loading...</>); // Render only when state is `pending`ui
.match("pending", () => <>Loading...</>); // Render when state is `pending`
.match("error", () => <>Error...</>); // Render when state is `error`
.match("default", () => <>Error...</>); // Render when state is `default`
.exhaustive(); // Ensures all possible states are matched and renderedui
.match("pending", () => <>Loading...</>); // Render when state is `pending`
.match("default", () => <>Error...</>); // Render when state is `default`
.nonExhaustive(); // Allows rendering without matching all possible statesMade with ❤️ by BearStudio Team