@json-render/zustand
Zustand adapter for json-render's StateStore interface. Wire a Zustand vanilla store as the state backend for json-render.
Installation
bashnpm install @json-render/zustand @json-render/core @json-render/react zustand
Requires Zustand v5+. Zustand v4 is not supported due to breaking API changes in the vanilla store interface.
Usage
tsximport { createStore } from "zustand/vanilla"; import { zustandStateStore } from "@json-render/zustand"; import { StateProvider } from "@json-render/react"; // 1. Create a Zustand vanilla store const bearStore = createStore(() => ({ count: 0, name: "Bear", })); // 2. Create the json-render StateStore adapter const store = zustandStateStore({ store: bearStore }); // 3. Use it <StateProvider store={store}> {/* json-render reads/writes go through Zustand */} </StateProvider>
With a Nested Slice
tsxconst appStore = createStore(() => ({ ui: { count: 0 }, auth: { token: null }, })); const store = zustandStateStore({ store: appStore, selector: (s) => s.ui, updater: (next, s) => s.setState({ ui: next }), });
API
zustandStateStore(options)
Creates a StateStore backed by a Zustand store.
| Option | Type | Required | Description |
|---|---|---|---|
store | StoreApi<S> | Yes | Zustand vanilla store (from createStore in zustand/vanilla) |
selector | (state) => StateModel | No | Select the json-render slice. Defaults to entire state. |
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. |
