zustand
installsforks
How to install zustand?
vercel-labs/json-render/zustand
$npx -y skills add vercel-labs/json-render --skill zustandZustand adapter for json-render's StateStore interface. Use when integrating json-render with Zustand for state management via @json-render/zustand.
SKILL.md
| 1 | # @json-render/zustand |
| 2 | |
| 3 | Zustand adapter for json-render's `StateStore` interface. Wire a Zustand vanilla store as the state backend for json-render. |
| 4 | |
| 5 | ## Installation |
| 6 | |
| 7 | ```bash |
| 8 | npm install @json-render/zustand @json-render/core @json-render/react zustand |
| 9 | ``` |
| 10 | |
| 11 | Requires Zustand v5+. Zustand v4 is not supported due to breaking API changes in the vanilla store interface. |
| 12 | |
| 13 | ## Usage |
| 14 | |
| 15 | ```tsx |
| 16 | import { createStore } from "zustand/vanilla"; |
| 17 | import { zustandStateStore } from "@json-render/zustand"; |
| 18 | import { StateProvider } from "@json-render/react"; |
| 19 | |
| 20 | // 1. Create a Zustand vanilla store |
| 21 | const bearStore = createStore(() => ({ |
| 22 | count: 0, |
| 23 | name: "Bear", |
| 24 | })); |
| 25 | |
| 26 | // 2. Create the json-render StateStore adapter |
| 27 | const store = zustandStateStore({ store: bearStore }); |
| 28 | |
| 29 | // 3. Use it |
| 30 | <StateProvider store={store}> |
| 31 | {/* json-render reads/writes go through Zustand */} |
| 32 | </StateProvider> |
| 33 | ``` |
| 34 | |
| 35 | ### With a Nested Slice |
| 36 | |
| 37 | ```tsx |
| 38 | const appStore = createStore(() => ({ |
| 39 | ui: { count: 0 }, |
| 40 | auth: { token: null }, |
| 41 | })); |
| 42 | |
| 43 | const store = zustandStateStore({ |
| 44 | store: appStore, |
| 45 | selector: (s) => s.ui, |
| 46 | updater: (next, s) => s.setState({ ui: next }), |
| 47 | }); |
| 48 | ``` |
| 49 | |
| 50 | ## API |
| 51 | |
| 52 | ### `zustandStateStore(options)` |
| 53 | |
| 54 | Creates a `StateStore` backed by a Zustand store. |
| 55 | |
| 56 | | Option | Type | Required | Description | |
| 57 | |--------|------|----------|-------------| |
| 58 | | `store` | `StoreApi<S>` | Yes | Zustand vanilla store (from `createStore` in `zustand/vanilla`) | |
| 59 | | `selector` | `(state) => StateModel` | No | Select the json-render slice. Defaults to entire state. | |
| 60 | | `updater` | `(nextState, store) => void` | No | Apply next state to the store. Defaults to shallow merge. Override for nested slices, or use `(next, s) => s.setState(next, true)` for full replacement. | |
People who liked this also viewed
6 picksType
- lark-drive飞书云空间（云盘/云存储）：管理 Drive 文件和文件夹，包含上传/下载、创建文件夹、复制/移动/删除、查看元数据、评论/权限/订阅、标题、版本、飞书文档密级标签（secure labels）和本地文件导入。用户需要整理云盘目录、处理云空间资源 URL/token、判断链接类型/真实 token/标题，或导入 Word/Markdown/Excel/CSV/PPTX/.base 为 docx/sSkillsJul 2026
- lark-sharedUse for lark-cli setup/auth tasks: auth login/status/logout, user vs bot identity, business-domain permissions (--domain, including all/docs/drive), missing scopes, revoking authorization, or handlingSkillsJul 2026
- lark-whiteboard飞书画板：查询和编辑飞书云文档中的画板。支持导出画板为预览图片、导出原始节点结构、使用多种格式更新画板内容。 当用户需要查看画板内容、导出画板图片、编辑画板时使用此 skill。不负责：飞书云文档内容编辑（lark-doc）、文档内嵌电子表格/Base（lark-sheets / lark-base）。SkillsJul 2026
- lark-task飞书任务：管理任务、清单和任务智能体。创建待办任务、查看和更新任务状态、拆分子任务、组织任务清单、分配协作成员、上传任务附件、注册或注销任务智能体、更新任务智能体的主页数据、写入智能体任务记录。当用户需要创建待办事项、查看任务列表、跟踪任务进度、管理项目清单或给他人分配任务、为任务上传附件文件、注册注销任务智能体、更新智能体主页数据、写入任务记录时使用。SkillsJul 2026
- lark-attendance飞书考勤打卡：查询自己的考勤打卡记录SkillsJul 2026
- lark-apps妙搭（Spark/Miaoda）应用开发与托管：应用创建、本地全栈开发、云端生成迭代、创意设计（UI mockup / 可交互原型 / 线框图 / 落地页 / 仪表盘 / 幻灯片 deck / 视觉探索）、AI相关能力和飞书平台能力或者其他外部能力集成、日志/Trace/监控指标/PV/UV 查询、环境变量管理、应用角色与成员管理、自动化触发器（定时/记录变更/Webhook/飞书审批）。当用户要SkillsJul 2026
