# React · Edge.Provider

Crea una luz compartida para las superficies descendientes.

Package: @bolerish/edge 0.4.0
Source: https://edge.bolerish.com/es/docs/react/provider/

<a id="styles"></a>

## Edge.Styles

Renderízalo una vez por documento SSR, antes de los estilos de la aplicación. React reutiliza esta hoja de estilos al conectar superficies. Mantén el componente montado mientras uses Edge y pasa un nonce si la CSP lo requiere. Sin este componente ni una importación explícita de CSS, el CSS predeterminado se añade en el cliente al conectar una superficie.

```tsx
<Edge.Styles nonce={nonce} />
```

| Prop / opción | Tipo | Predeterminado | Descripción |
| --- | --- | --- | --- |
| `nonce` | `string` | `undefined` | Nonce opcional de la solicitud para el elemento style. Usa el mismo valor en el servidor y durante la hidratación. Es necesario si la CSP solo permite estilos en línea con nonce. |

<a id="lighting"></a>

## Edge.Provider

Permite que los Edge.Surface descendientes compartan una luz, sin añadir elementos DOM. Cada Edge.Provider anidado crea una luz independiente.

```tsx
<Edge.Provider motion="system" range={480} intensity={0.75}>
  {/* Your surfaces */}
</Edge.Provider>
```

| 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. |
| `children` | `ReactNode` | `Required` | Área que comparte la luz. Los hijos normales no cambian; solo responden las superficies explícitas. |
| `ref` | `Ref<Light>` | `Unset` | Ref opcional para recibir el objeto de luz. Su referencia se mantiene estable. Llama a refresh() si solo cambia la posición del elemento. |

Los eventos del puntero se reciben del documento. Edge.Provider determina qué superficies responden, sin limitar la entrada al rectángulo de un contenedor. `staticDirection` se aplica siempre que la luz sea fija, también cuando `motion="system"` respeta la preferencia de movimiento reducido.