# React · useLight

照明ハンドルを作成して設定します。

Package: @bolerish/edge 0.4.0
Source: https://edge.bolerish.com/ja/docs/react/use-light/

<a id="use-light"></a>

## useLight(options?)

Edge.Provider を使わずに光を管理するための `Light` ハンドルを返します。参照は維持され、オプションの変更は既存の光に反映されます。このハンドルを `useSurface(light, options)` に渡してください。通常のコンポーネントツリーでは `Edge.Provider` で十分です。

```tsx
function useLight(options?: LightOptions): Light;
```

| 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 を発生させます。 |

`range` は動的照明にのみ適用されます。固定ライトは距離による減衰を行わず、`staticDirection` で方向を決めます。

<a id="refresh"></a>

## light.refresh()

ポインターが静止していても、次のフレームでサーフェスを再計測します。サイズ通知を伴わない位置や境界線の太さの変更を React が反映した後に呼び出してください。

```tsx
interface Light {
  refresh(): void;
}
```

サイズ変更とスクロールは自動で検知します。詳しくは[レイアウトの更新](https://edge.bolerish.com/ja/docs/integration/#refresh-after-layout-changes)を参照してください。