Jotai

作者 vercel-labsfc2a696a50a3无许可证18K 个星标收录于 2026年10月8日更新于 2026年10月8日仓库昨天更新

Jotai adapter for json-render's StateStore interface. Use when integrating json-render with Jotai for state management via @json-render/jotai.

精选仅含说明Software Development

AI 生成的概览

说明如何使用 @json-render/jotai 适配器，以 Jotai atom 作为 json-render 的 StateStore 后端。

功能: 该技能讲解如何通过 @json-render/jotai 包把 Jotai atom 接入 json-render，作为其状态后端。内容涵盖安装、配合 StateProvider 的基本用法、通过 Provider 共享自定义 Jotai store，以及 jotaiStateStore 的 atom 与 store 选项。产出的是集成说明与代码示例，而非可运行脚本。
适用场景: 在将 json-render 与 Jotai 集成做状态管理时使用，或当 json-render 与现有 Jotai 组件需要共享同一份状态时使用。也可作为 jotaiStateStore API 的参考。
运行要求: 需要 npm 包 @json-render/jotai、@json-render/core、@json-render/react 和 jotai，以及 React/TSX 环境。该技能不附带脚本，仅为说明文档。

@json-render/jotai

Jotai adapter for json-render's StateStore interface. Wire a Jotai atom as the state backend for json-render.

Installation

Usage

tsx

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 stateconst uiAtom = atom<Record<string, unknown>>({ count: 0 });
// 2. Create the json-render StateStore adapterconst store = jotaiStateStore({ atom: uiAtom });
// 3. Use it<StateProvider store={store}>  {/* json-render reads/writes go through Jotai */}</StateProvider>

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 stateconst uiAtom = atom<Record<string, unknown>>({ count: 0 });
// 2. Create the json-render StateStore adapterconst store = jotaiStateStore({ atom: uiAtom });
// 3. Use it<StateProvider store={store}>  {/* json-render reads/writes go through Jotai */}</StateProvider>

With a Shared Jotai Store

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:

tsx

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>

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)`

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>`.

来源与署名

来源：vercel-labs/json-render位于skills/jotai提交fc2a696

许可证：无许可证

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架

Jotai

@json-render/jotai

Installation

Usage

With a Shared Jotai Store

API

`jotaiStateStore(options)`

来源与署名

更多来自 vercel-labs/json-render 的技能

Remotion

Zustand

Svelte

Xstate

Solid

Vue

更多Software Development技能

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices