インストール

npm add synstate

または他のパッケージマネージャを使用する場合：

# Yarn
yarn add synstate

# pnpm
pnpm add synstate

React Hooks

React を使用している場合は、コンパニオン hooks パッケージをインストールしてください：

npm add synstate-react-hooks

synstate-react-hooks は synstate のすべてのエクスポートに加えて、React 向けに拡張された createState、createReducer、createBooleanState API を含んでいるため、別途 synstate を追加する必要はありません。

React Hooks（React 16.8–17）

React 16.8–17（useSyncExternalStore なし）の場合は、compat パッケージを使用してください：

npm add synstate-react-hooks-compat

API は synstate-react-hooks と同一です。詳細は React 連携を参照してください。

Preact Hooks

Preact を使用している場合は、コンパニオン hooks パッケージをインストールしてください：

npm add synstate-preact-hooks

Preact Signals

hooks の代わりに Preact Signals で描画する場合は、ブリッジパッケージを peer dependency の preact・@preact/signals と一緒にインストールしてください：

npm add synstate-preact-signals preact @preact/signals

Observable と signal を相互に変換する関数（toSignal・fromSignal）を提供し、その createState・createReducer・createBooleanState は hook の代わりに ReadonlySignal を返します。hooks パッケージと同じく synstate の関数と型を再エクスポートしています。Preact Signals デモを参照してください。

synstate-dom（フレームワークなし）

synstate-dom は SynState の上に作られた、コンパイラを使わない UI ライブラリで、仮想 DOM もフレームワークも介さずに Observable を DOM に直接束縛します。動くデモは synstate-dom の紹介にあります。インストール方法と API は専用のドキュメントサイトにあります。

ESLint プラグイン

eslint-plugin-synstate は、型では検出できない誤りを報告します。たとえば subscriber からの state への書き込みです（synstate/no-write-during-propagation、subscriber からの書き込みを参照）。ESLint 9 以降の flat config が必要です：

npm add -D eslint-plugin-synstate

recommended プリセットはプラグインを登録し、すべてのルールを有効にします。ルールは型情報なしで動きます。設定がすでに型情報付きで lint している（parserOptions.projectService）場合は、no-write-during-propagation が別ファイルから import した setter もたどります：

// eslint.config.mts
import { eslintPluginSynstate } from 'eslint-plugin-synstate';

export default [eslintPluginSynstate.configs.recommended];

ルールの一覧と個別の設定方法はプラグインの README にあります。