@baserstudio/ ui- state (英语)

处理动态 UI 显示状态的轻量级工具 loading, (中文(简体) ), error,或者任何自定义状态——基于您的应用逻辑.

* 特性

• * 声明和表达性API
• 有条件的动态状态评价
• * 完全自定义状态和有效载荷

* 安装

pnpm install @bearstudio/ui-state
npm install @bearstudio/ui-state
yarn add @bearstudio/ui-state

基本用途

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 });
});

重现中渲染

ui.match("pending", () => <>Loading...</>)
  .match("error", () => <>Error</>)
  .match("default", ({ book }) => <>{book.title}</>)
  .exhaustive();

当状态已经知道时, 直接通过—— 不 set() 回调 :

getUiState(query.status)
  .match("pending", () => <>Loading...</>)
  .match("error", () => <>Error</>)
  .match("success", () => <>Ready</>)
  .exhaustive();

麻省理工学院许可证

由BearStudio团队制作