# React · useLight

创建并配置光照句柄。

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

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

## useLight(options?)

返回引用稳定的 `Light` 句柄，用于在不使用 Edge.Provider 时自行管理光照。选项变化会更新现有光照。将句柄传给 `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/zh/docs/integration/#refresh-after-layout-changes)。