Next.js에서 Intersection Observer API 사용

¡안녕! En este artículo vamos a ver como usar Intersection Observer API. Es una API del navegador que nos permite detector cuando un elemento es visible en pantalla, o (y acá está lo bueno) cuando el elemento está por serlo, y con esto poder realizar alguna acción.

Esta API를 사용하는 다양한 방법은 이미지의 지연 로딩 또는 "무한 스크롤"을 구현하는 것과 관련이 있으며 이전 API와 상호 작용하는 요소는 새로운 UI와 농장 스크롤을 사용하는 것입니다.

En concreto 🧐 nuestro proyecto va a tener una serie de artículos y a medida que vamos avanzando por ellos, vamos a ir marcando como "activo"el título que responda.

Te dejo는 lademo del proyecto y alrepositorio completo del proyecto en GitHub을 연결합니다.

엠페세모스

Lo Primero que tenemos que hacer es crear nuestro proyecto en Next.js, y eso lo hacemos con el comando yarn create next-app .

Una vez que tenemos nuestro proyecto corriendo vamos a crear un directorio /components en el cual vamos a agregar dos componentes: Title y Article . De tal manera que queden así:
Title.js

import React from 'react'
import styles from '../styles/Title.module.css'

const Title = ({text, isActive}) => {
    return <li className={`${styles.title} ${isActive ? styles.active : ''}`}>{text}</li>
}
export default Title

Article.js

import React from 'react'
import styles from '../styles/Article.module.css'

const Article = ({ id, title, content }) => {
   return (
       <article className={styles.article} id={id}>
           <h2>{title}</h2>
           <p className={styles.content}>{content}</p>
       </article>
   )
}

export default Article

Usando nuestros componentes

Una vez que tenemos nuestros componentes, vamos a usarlos en el archivoindex.js de tal manera que quede así:

import React, { useState } from 'react'
import Head from 'next/head'
import styles from '../styles/Home.module.css'

import Title from '../components/Title'
import Article from '../components/Article'

import data from '../data/data.json'

export default function Home() {
  const [activeArticle, setActiveArticle] = useState('01');
  return (
    <main>
      <ul>
        {data.titles.map(({title, id}) => {
          return <Title key={id} text={title} isActive={id === activeArticle} />
        })}
      </ul>
      <div>
        {data.articles.map(({id, title, content}) => {
          return <Article key={id} title={title} content={content} id={id} />
        })}
      </div>
    </main>
)}

Agregando la Intersection Observer API

Lo primero que tenemos que hacer es crear, en index.js , nuestro observer , el cual recibe dos parametros:

El primero es el call back que queremos ejecutar cuando la API detecte que el scroll está cerca del elemento a observar

El segundo es un objeto que nos permite configurar nuestro observer, podemos indicar qué tan pronto o tarde disparar nuestro call back, es decir, con qué porcentaje de visibilidad de nuestro elemento se debe ejecutar el call back.

Una vez creado nuestro observer, tenemos que indicarle qué elementos observar. Y como nuestro proyecto tiene varios artículos a observar, cada uno de ellos va a recibir por prop un observer, de tal manera que nuestro index.js quede así:

// imports..

export default function Home() {
  const [activeArticle, setActiveArticle] = useState('01');

  const handleIntersect = (entries) => {
    if (entries[0].isIntersecting) {
      setActiveArticle(entries[0].target.id);
    }
  };

  const createObserver = (target) => {
    const options = { threshold: 1.0 };

    const observer = new IntersectionObserver(handleIntersect, options);

    observer.observe(target);
  };

  return (
    <main>
      <ul>
        {data.titles.map(({title, id}) => {
          return <Title key={id} text={title} isActive={id === activeArticle} />
        })}
      </ul>
      <div>
        {data.articles.map(({id, title, content}) => {
          return <Article key={id} title={title} content={content} id={id} createObserver={createObserver} />
        })}
      </div>
    </main>
)}

Analicemos este código 🤔 .

La función handleIntersect es nuestro call back, esto quiere decir que es la función que se va a ejecutar cada vez que observer detecte que el elemento observado sea en visible.

Lo que hace este call back es tomar el ID del elemento observado y guardarlo en el state de la aplicación, el cual nos sirve para saber qué artículo es visible y así marcar como activo el título 상응.

Ya tenemos nuestro observer y call back creados, ahora solo nos queda usarlos. Y para eso, como dijimos anteriormente, debemos enviar por propiedad nuestro observer a cada artículo y ejecutarlo. Nuestro Article.js nos quedará de la siguiente manera:

import React, { useEffect, useRef } from 'react'
import styles from '../styles/Article.module.css'

const Article = ({ id, title, content, createObserver }) => {
    const el = useRef(null);
    useEffect(() => {
        createObserver(el.current);
    }, []);

    return (
        <article ref={el} className={styles.article} id={id}>
            <h2>{title}</h2>
            <p className={styles.content}>{content}</p>
        </article>
    )
}

export default Article

Y voilá, eso es todo 🥳.

Ya tenemos creado y configurado nuestro observer, y ya está siendo usado por cada elemento a observar.

Espero que puedas aplicar lo aprendido en este artículo en tus proyecto.

Eso es todo por ahora, nos vemos pronto 👋🏻.