Edge.Provider
Crea una luz compartida para las superficies descendientes.
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.
<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. |
Edge.Provider
Permite que los Edge.Surface descendientes compartan una luz, sin añadir elementos DOM. Cada Edge.Provider anidado crea una luz independiente.
<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.