Comprobar si un elemento es visible con ganchos React (2023)

Comprobar si un elemento está visible en la pantalla del usuario es muy fácil usando elAPI de observador de intersecciones. Esta API es compatible con todos los principales navegadores.

La API Intersection Observer nos permite detectar intersecciones de un elemento con otro elemento. En nuestro caso, vamos a observar las intercepciones entre un elemento React y la ventana gráfica del navegador.

Vamos a crear un enlace personalizado para que esto reutilice este código donde lo necesitemos.

En nuestro hook personalizado vamos a usaruseStatepara almacenar el estado de intersección del elemento.

exportar función useIsVisible() { constante [isIntersecting, conjuntoIntersección] = useState(FALSO); devolver isIntersecting;}

El gancho necesita una referencia al elemento React que queremos observar. vamos a usar elárbitroprop para pasar el elemento al gancho.

exportar función useIsVisible(árbitro) { constante [isIntersecting, conjuntoIntersección] = useState(FALSO); devolver isIntersecting;}

Finalmente, necesitamos crear una instancia deIntersecciónObservadory observe el elemento. ElIntersecciónObservadorEl constructor acepta una función de devolución de llamada como primer argumento que se llama cuando el elemento se cruza con la ventana gráfica.

vamos a usar elefecto de usogancho para hacer esto para evitar la creación de nuevos observadores en los renderizados.

exportar función useIsVisible(árbitro) { constante [isIntersecting, conjuntoIntersección] = useState(FALSO); efecto de uso(() => { constante observador = nuevo IntersecciónObservador(([entrada]) => conjuntoIntersección(entrada.isIntersecting) ); observador.observar(árbitro.actual); }, [árbitro]); devolver isIntersecting;}

Para mejorar el rendimiento, vamos a llamarIntersectionObserver.desconectar()para dejar de observar los cambios cuando se desmonta el componente o se pasa un nuevo elemento al gancho.

exportar función useIsVisible(árbitro) { constante [isIntersecting, conjuntoIntersección] = useState(FALSO); efecto de uso(() => { constante observador = nuevo IntersecciónObservador(([entrada]) => conjuntoIntersección(entrada.isIntersecting) ); observador.observar(árbitro.actual); devolver () => { observador.desconectar(); }; }, [árbitro]); devolver isIntersecting;}

Nuestro gancho está listo para ser utilizado. Para usarlo solo necesitamos llamarlo desde un componente de React y pasar una referencia al elemento que queremos comprobar si está visible o no.

exportar función micomponente() { constante árbitro = useRef(); constante es visible = useIsVisible(árbitro); devolver ( <división árbitro={árbitro}> <pag>{es visible ? "Visible" : "No visible"}pag> división> );}

Puedes ver un ejemplo de uso real de este gancho enMi sitio web. Estoy usando el enlace para detectar si el usuario se desplaza hasta la parte inferior de la página y luego carga los comentarios de una publicación de blog. Puede ver el código fuente del componente.aquí. Ingrese a cualquiera de las publicaciones del blog y desplácese hasta la parte inferior de la página para verlo en acción.

Referencias

• API de observador de intersecciones
• IntersectionObserver.desconectar()