jotai by vercel-labs/json-render
npx skills add https://github.com/vercel-labs/json-render --skill jotai适用于 json-render StateStore 接口的 Jotai 适配器。将 Jotai atom 作为 json-render 的状态后端进行连接。
npm install @json-render/jotai @json-render/core @json-render/react jotai
import { atom } from "jotai";
import { jotaiStateStore } from "@json-render/jotai";
import { StateProvider } from "@json-render/react";
// 1. 创建一个持有 json-render 状态的 atom
const uiAtom = atom<Record<string, unknown>>({ count: 0 });
// 2. 创建 json-render 的 StateStore 适配器
const store = jotaiStateStore({ atom: uiAtom });
// 3. 使用它
<StateProvider store={store}>
{/* json-render 的读写操作将通过 Jotai 进行 */}
</StateProvider>
当你的应用已经使用了带有自定义 store 的 Jotai <Provider> 时,将其传入,以便 json-render 和你的组件共享相同的状态:
import { atom, createStore } from "jotai";
import { Provider as JotaiProvider } from "jotai/react";
import { jotaiStateStore } from "@json-render/jotai";
import { StateProvider } from "@json-render/react";
const jStore = createStore();
const uiAtom = atom<Record<string, unknown>>({ count: 0 });
const store = jotaiStateStore({ atom: uiAtom, store: jStore });
<JotaiProvider store={jStore}>
<StateProvider store={store}>
{/* json-render 和 useAtom() 将看到相同的状态 */}
</StateProvider>
</JotaiProvider>
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
jotaiStateStore(options)创建一个由 Jotai atom 支持的 StateStore。
| 选项 | 类型 | 是否必需 | 描述 |
|---|---|---|---|
atom | WritableAtom<StateModel, [StateModel], void> | 是 | 持有状态模型的可写 atom |
store | Jotai Store | 否 | Jotai store 实例。默认为一个新的 store。传入你自己的 store 以与 <Provider> 共享状态。 |
每周安装量
150
代码仓库
GitHub 星标数
13.3K
首次出现
2026年3月7日
安全审计
安装于
codex148
cursor146
gemini-cli145
kimi-cli145
opencode145
github-copilot145
Jotai adapter for json-render's StateStore interface. Wire a Jotai atom as the state backend for json-render.
npm install @json-render/jotai @json-render/core @json-render/react jotai
import { atom } from "jotai";
import { jotaiStateStore } from "@json-render/jotai";
import { StateProvider } from "@json-render/react";
// 1. Create an atom that holds the json-render state
const uiAtom = atom<Record<string, unknown>>({ count: 0 });
// 2. Create the json-render StateStore adapter
const store = jotaiStateStore({ atom: uiAtom });
// 3. Use it
<StateProvider store={store}>
{/* json-render reads/writes go through Jotai */}
</StateProvider>
When your app already uses a Jotai <Provider> with a custom store, pass it so both json-render and your components share the same state:
import { atom, createStore } from "jotai";
import { Provider as JotaiProvider } from "jotai/react";
import { jotaiStateStore } from "@json-render/jotai";
import { StateProvider } from "@json-render/react";
const jStore = createStore();
const uiAtom = atom<Record<string, unknown>>({ count: 0 });
const store = jotaiStateStore({ atom: uiAtom, store: jStore });
<JotaiProvider store={jStore}>
<StateProvider store={store}>
{/* Both json-render and useAtom() see the same state */}
</StateProvider>
</JotaiProvider>
jotaiStateStore(options)Creates a StateStore backed by a Jotai atom.
| Option | Type | Required | Description |
|---|---|---|---|
atom | WritableAtom<StateModel, [StateModel], void> | Yes | A writable atom holding the state model |
store | Jotai Store | No | The Jotai store instance. Defaults to a new store. Pass your own to share state with <Provider>. |
Weekly Installs
150
Repository
GitHub Stars
13.3K
First Seen
Mar 7, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
codex148
cursor146
gemini-cli145
kimi-cli145
opencode145
github-copilot145
Flutter应用架构设计指南:分层结构、数据层实现与最佳实践
4,400 周安装