インストール

NPM

Recoilパッケージはnpmにあります。最新の安定版をインストールするには、次のコマンドを実行します。

npm install recoil

または、yarnを使用している場合は、

yarn add recoil

または、bowerを使用している場合は、

bower install --save recoil

バンドラー

NPM経由でインストールされたRecoilは、WebpackやRollupなどのモジュールバンドラーと相性が良いです。

ES5サポート

RecoilのビルドはES5にトランスパイルされておらず、ES5でのRecoilの使用はサポートしていません。ES6の機能をネイティブに提供しないブラウザをサポートする必要がある場合は、Babelでコードをコンパイルし、preset @babel/preset-envを使用することで対応できます。ただし、これはサポートされておらず、問題が発生する可能性があります。特に、Reactと同様に、RecoilはMap型とSet型、およびその他のES6の機能に依存しています。ポリフィルを使用したこれらの機能のエミュレーションは、パフォーマンスの低下につながる可能性があります。

CDN

バージョン0.0.11以降、Recoilは<script>タグで直接使用でき、グローバル名前空間にシンボルRecoilを公開するUMDビルドを提供しています。新しいバージョンによる予期せぬ破損を避けるために、特定のバージョン番号とビルドにリンクすることをお勧めします。

<script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/recoil.production.js"></script>

jsdelivrでCDN上のすべてのRecoilファイルを参照できます。

ESLint

プロジェクトでeslint-plugin-react-hooksを使用している場合。たとえば、次のようなeslint構成の場合

// previous .eslint config
{
  "plugins": [
    "react-hooks"
  ],
  "rules": {
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn"
  }
}

'useRecoilCallback'をadditionalHooksのリストに追加することをお勧めします。この変更により、useRecoilCallback()に渡された依存関係が正しく指定されていない場合にESLintが警告し、修正を提案します。additionalHooksの形式は正規表現文字列です。

// modified .eslint config
{
  "plugins": [
    "react-hooks"
  ],
  "rules": {
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": [
      "warn", {
        "additionalHooks": "(useRecoilCallback|useRecoilTransaction_UNSTABLE)"
      }
    ]
  }
}

ナイトリービルド

現在のmainブランチに基づいて毎日1回パッケージをビルドし、GitHubのnightlyブランチとして公開しています。このブランチはnpm経由で使用できます

npm install https://github.com/facebookexperimental/Recoil.git#nightly

またはyarn

yarn add https://github.com/facebookexperimental/Recoil.git#nightly

または、package.jsonに依存関係を追加して、npm installまたはyarnを実行します。

  "recoil": "facebookexperimental/Recoil.git#nightly",