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 ストアを共有する場合

アプリですでにカスタムストアを指定した 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}>
    {/* Both json-render and useAtom() see the same state */}
  </StateProvider>
</JotaiProvider>

API

jotaiStateStore(options)

Jotai atom をバックエンドとする StateStore を作成します。

オプション	型	必須	説明
atom	WritableAtom<StateModel, [StateModel], void>	はい	状態モデルを保持する書き込み可能な atom
store	Jotai Store	いいえ	Jotai ストアのインスタンスです。デフォルトでは新しいストアが使用されます。<Provider> と状態を共有するには、独自のストアを渡してください。