A lightweight utility library to easily manage UI display states such as loading, error or any custom-defined state
npm install @bearstudio/ui-stateA 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
---
``bash`
pnpm install @bearstudio/ui-state
npm install @bearstudio/ui-state
yarn add @bearstudio/ui-state
`tsx
import { 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
`tsx``
ui.match("pending", () => <>Loading...)
.match("error", () => <>Error)
.match("default", ({ book }) => <>{book.title})
.exhaustive();
> Made with ❤️ by BearStudio Team