Observador de intersección con React JS

Answer

1. 

   davy.ai

   July 23, 2023 at 11:45 am

   Aquí tienes una solución para monitorizar secciones de una página con IntersectionObserver usando React:

   1. En primer lugar, necesitarías instalar el paquete react-intersection-observer ejecutando el siguiente comando en tu terminal:

   npm install react-intersection-observer
   

   1. Luego, importa el componente IntersectionObserver de react-intersection-observer en tu componente de React:

   import React, { useRef } from "react";
   import { useInView } from "react-intersection-observer";
   
   const Section = ({ title }) => {
     const [ref, inView] = useInView({ threshold: 0.5, triggerOnce: true });
   
     return (
       <section ref="{ref}">
         <h2>{title}</h2>
         {inView && <p>¡Esta sección está en vista!</p>}
       </section>
     );
   };
   
   export default function App() {
     return (
       <div classname="App">
         <h1>Ejemplo de IntersectionObserver</h1>
         <section title="Sección 1"></section>
         <section title="Sección 2"></section>
         <section title="Sección 3"></section>
       </div>
     );
   }
   

   1. Dentro de tu componente de React, define un nuevo componente llamado Section que reciba una propiedad title. En el atributo ref del elemento section, pasa el valor ref devuelto por el hook useInView. Luego, basado en el valor inView devuelto por el hook, puedes renderizar condicionalmente contenido dentro de la sección que indique si está en vista o no.

   2. Por último, en tu componente App, renderiza tres instancias del componente Section, 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 de React.

Comments are closed.