mcpField
J
jotai

jotai

github.com/vercel-labs开发18.8k1.1k 次安装5 天前更新
代码仓库

关于 jotai

这是 json-render 的 Jotai 适配器，可将可写 atom 用作 StateStore 后端。也可传入现有 Jotai store，让应用组件共享状态。

主要功能

  1. 01以 Jotai atom 作为 StateStore 后端
  2. 02支持传入共享 Jotai store

适用场景

  1. 01在 json-render 中使用 Jotai 状态
  2. 02与现有 Jotai 组件共享状态

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/vercel-labs/json-render --skill jotai

安装后在 Claude Code 中输入/jotai确认已加载。

详细介绍

@json-render/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. 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>
使用共享的 Jotai Store

如果你的应用已使用带有自定义 store 的 Jotai <Provider>，请将该 store 传入，以便 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}>
    {/* Both json-render and useAtom() see the same state */}
  </StateProvider>
</JotaiProvider>

API

jotaiStateStore(options)

创建一个由 Jotai atom 提供支持的 StateStore。

选项类型必填说明
atomWritableAtom<StateModel, [StateModel], void>是保存状态模型的可写 atom
storeJotai Store否Jotai store 实例。默认为新建的 store。传入自定义 store 可与 <Provider> 共享状态。

评论

支持 Markdown