# React · useLight

Crea y configura un identificador de luz.

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

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

## useLight(options?)

Devuelve un objeto `Light` de referencia estable para gestionar la luz sin Edge.Provider. Los cambios de opciones actualizan la luz existente. Pásalo a `useSurface(light, options)`. Para un árbol de componentes habitual, basta con `Edge.Provider`.

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

| Prop / opción | Tipo | Predeterminado | Descripción |
| --- | --- | --- | --- |
| `motion` | `'system' \| 'dynamic' \| 'static'` | `'system'` | system respeta las preferencias de movimiento y del dispositivo. dynamic sigue el ratón o lápiz incluso con movimiento reducido. static mantiene una dirección fija. El toque actualiza la posición de la luz en coordenadas de pantalla. Al desplazarse o levantar el dedo se conserva la última posición; las superficies reaccionan al pasar por debajo. Un nuevo toque actualiza la posición. El seguimiento táctil respeta el modo elegido: static permanece fijo y system permanece fijo si está activada la reducción de movimiento. |
| `staticDirection` | `number \| 'random'` | `315` | Dirección en grados para iluminación fija. random elige una dirección compartida por montaje y la conserva al volver a renderizar. Los números deben ser finitos. |
| `direction` | `'toward' \| 'away'` | `'toward'` | toward orienta el reflejo hacia el puntero y away lo invierte 180 grados. Todos los estilos mantienen esta elección. Solo afecta a la luz que sigue al puntero; staticDirection controla la dirección fija. |
| `range` | `number` | `480` | Distancia de atenuación de la luz dinámica fuera de una superficie, en píxeles CSS del viewport. Debe ser positiva y finita. |
| `intensity` | `number` | `0.75` | Intensidad de la luz compartida. Debe ser finita y estar entre 0 y 1; los valores inválidos lanzan RangeError. |

`range` solo afecta a la iluminación dinámica. La luz fija no se atenúa con la distancia y usa la dirección indicada por `staticDirection`.

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

## light.refresh()

Vuelve a medir las superficies en el siguiente fotograma, incluso con el puntero inmóvil. Llámalo después de que React aplique cambios de posición o grosor del borde sin notificación de tamaño.

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

Los cambios de tamaño y el scroll se detectan automáticamente. Consulta [actualizaciones de diseño](https://edge.bolerish.com/es/docs/integration/#refresh-after-layout-changes) para más información.