# React · Edge.Provider

创建供后代界面共享的光照。

Package: @bolerish/edge 0.4.0
Source: https://edge.bolerish.com/zh/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

让后代 Edge.Surface 共享同一光照，不添加额外的 DOM 元素。嵌套的 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"` 遵循减少动态效果设置时。