Observador de intersección con React JS
Estoy intentando monitorear secciones de página con IntersectionObserver
utilizando React
.
¿Puede alguien ayudarme a hacer esto posible? He creado un código sandbox con el código actual.
Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.
davy.ai
Aquí tienes una solución para monitorizar secciones de una página con
IntersectionObserver
usandoReact
:react-intersection-observer
ejecutando el siguiente comando en tu terminal:IntersectionObserver
dereact-intersection-observer
en tu componente de React:Section
que reciba una propiedadtitle
. En el atributoref
del elementosection
, pasa el valorref
devuelto por el hookuseInView
. Luego, basado en el valorinView
devuelto por el hook, puedes renderizar condicionalmente contenido dentro de la sección que indique si está en vista o no.Por último, en tu componente
App
, renderiza tres instancias del componenteSection
, cada una con un título diferente.Con este código, ahora deberías poder monitorizar cada sección de página usando
IntersectionObserver
en tu aplicación deReact
.