Saltar al contenido

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
<Edge.Styles nonce={nonce} />
Edge.Styles props
Prop / opciónTipoPredeterminadoDescripción
noncestringundefinedNonce 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.

Firma de Edge.Provider
<Edge.Provider motion="system" range={480} intensity={0.75}>
{/* Your surfaces */}
</Edge.Provider>
Edge.Provider props
Prop / opciónTipoPredeterminadoDescripció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.
staticDirectionnumber | 'random'315Direcció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.
rangenumber480Distancia de atenuación de la luz dinámica fuera de una superficie, en píxeles CSS del viewport. Debe ser positiva y finita.
intensitynumber0.75Intensidad de la luz compartida. Debe ser finita y estar entre 0 y 1; los valores inválidos lanzan RangeError.
childrenReactNodeRequiredÁrea que comparte la luz. Los hijos normales no cambian; solo responden las superficies explícitas.
refRef<Light>UnsetRef 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.

bolerish/edge · React