Edge.Provider

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

Edge.Styles

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

Edge.Styles

<Edge.Styles nonce={nonce} />

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

Edge.Provider

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

Edge.Provider のシグネチャ

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

Edge.Provider props
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" が動きを減らす設定に従う場合も同様です。