# React · Edge.Provider

子孫のサーフェスで共有する照明を作成します。

Package: @bolerish/edge 0.4.0
Source: https://edge.bolerish.com/ja/docs/react/provider/

<a id="styles"></a>

## Edge.Styles

SSR ドキュメントごとに、アプリのスタイルより前に一度レンダリングしてください。React はサーフェスの接続時にこのスタイルを再利用します。Edge を使う間はこのコンポーネントを維持し、CSP で必要な場合は nonce を渡します。このコンポーネントも明示的な CSS インポートもない場合、サーフェスの接続時にクライアントでデフォルトの CSS を追加します。

```tsx
<Edge.Styles nonce={nonce} />
```

| Prop / オプション | 型 | デフォルト | 説明 |
| --- | --- | --- | --- |
| `nonce` | `string` | `undefined` | style 要素に渡すリクエストごとの nonce です。サーバーとハイドレーションで同じ値を使います。CSP が nonce 付きのインラインスタイル要素のみを許可する場合に必要です。 |

<a id="lighting"></a>

## Edge.Provider

DOM 要素を追加せずに、子孫の Edge.Surface でライトを共有します。Edge.Provider を入れ子にすると、独立したライトを作れます。

```tsx
<Edge.Provider motion="system" range={480} intensity={0.75}>
  {/* Your surfaces */}
</Edge.Provider>
```

| Prop / オプション | 型 | デフォルト | 説明 |
| --- | --- | --- | --- |
| `motion` | `'system' \| 'dynamic' \| 'static'` | `'system'` | system は動きを減らす設定と入力機器の設定に従います。dynamic は動きを減らす設定でもマウスやペンに追従します。static は方向を固定します。タッチで画面基準の照明位置を更新します。スクロール中や指を離した後も最後の位置を保ち、その下を移動するサーフェスが反応します。再びタッチすると位置を更新します。 タッチ追従も選択したモーションモードに従います。static は固定され、system は動きを減らす設定が有効な場合に固定されます。 |
| `staticDirection` | `number \| 'random'` | `315` | 固定ライトの方向を度で指定します。random はマウントごとに共有方向を選び、通常の再レンダリングでは維持します。数値は有限である必要があります。 |
| `direction` | `'toward' \| 'away'` | `'toward'` | toward はハイライトをポインターの方向に向け、away は 180 度反転させます。すべてのサーフェススタイルでこの選択を維持します。ポインターに追従するライトのみが対象で、固定方向は staticDirection で設定します。 |
| `range` | `number` | `480` | サーフェスの外で動的照明が減衰する距離です。ビューポートの CSS ピクセル単位で、有限の正数を指定します。 |
| `intensity` | `number` | `0.75` | 共有する光の強度です。0〜1 の有限値が必要で、不正な値は RangeError を発生させます。 |
| `children` | `ReactNode` | `Required` | 光を共有する領域です。通常の子要素は変わらず、明示的に指定したサーフェスだけが反応します。 |
| `ref` | `Ref<Light>` | `Unset` | ライトのハンドルを受け取る ref です。ハンドルの参照は維持されます。位置だけが変わった場合は refresh() を呼び出してください。 |

ポインター入力はドキュメント全体から受け取ります。Edge.Provider は入力範囲を矩形に制限せず、どのサーフェスが反応するかを決めます。固定ライトには `staticDirection` が使われます。`motion="system"` が動きを減らす設定に従う場合も同様です。