跳转到内容

useLight

创建并配置光照句柄。

useLight(options?)

返回引用稳定的 Light 句柄,用于在不使用 Edge.Provider 时自行管理光照。选项变化会更新现有光照。将句柄传给 useSurface(light, options) 即可。普通组件树使用 Edge.Provider 就足够了。

useLight 签名
function useLight(options?: LightOptions): Light;
useLight options
Prop / 选项类型默认值说明
motion'system' | 'dynamic' | 'static''system'system 遵循减少动态效果和设备偏好。dynamic 即使在减少动态效果开启时也跟随鼠标或笔。static 保持固定方向。触摸会更新光照在视口中的位置。滚动或抬起手指后保留最后位置,界面在其下方移动时响应光照。再次触摸会更新位置。 触摸跟随也遵循所选动态模式:static 保持固定,system 在开启减少动态效果时保持固定。
staticDirectionnumber | 'random'315固定光照的方向,单位为度。random 每次挂载选择一个共享方向,并在普通重渲染时保持。数值必须有限。
direction'toward' | 'away''toward'toward 使高光朝向指针,away 将方向反转 180 度。所有表面样式均保持这一选择。仅影响跟随指针的光照;固定方向由 staticDirection 控制。
rangenumber480动态光照在表面外衰减的距离,以视口 CSS 像素为单位。必须为有限正数。
intensitynumber0.75共享光照强度。必须为 0 到 1 之间的有限值;无效值抛出 RangeError。

range 仅影响动态光照。固定光照不随距离衰减,方向由 staticDirection 决定。

light.refresh()

在下一帧重新测量表面的位置和尺寸,即使指针静止也会更新。如果元素的位置或边框粗细发生变化,但未触发尺寸变更通知,请在 React 提交这些更改后调用。

refresh 签名
interface Light {
refresh(): void;
}

尺寸变化和滚动会自动检测。详情请参阅布局更新。

bolerish/edge · React