Comment utiliser l'observateur d'intersection dans React

Aujourd'hui, nous allons explorer comment utiliser l'API d'observateur d'intersection dans React avec quelques exemples.

La documentation Web de Mozilla décrit l'API de l'observateur d'intersection comme :

permet au code d'enregistrer une fonction de rappel qui s'exécute chaque fois qu'un élément qu'il souhaite surveiller entre ou quitte un autre élément (ou la fenêtre d'affichage), ou lorsque la valeur par laquelle les deux se croisent change d'un montant demandé. Ainsi, les sites n'ont plus besoin de faire quoi que ce soit sur le thread principal pour observer ce type d'intersection d'éléments, et le navigateur est libre d'optimiser la gestion des intersections comme bon lui semble.

En bref, cela nous permet de détecter quand un certain élément est visible dans la fenêtre, cela ne se produit que lorsque l'élément atteint le rapport d'intersection souhaité.

Comme vous pouvez le voir, si vous faites défiler la page vers le bas, le taux d'intersection augmentera jusqu'à atteindre la limite projetée et à ce moment-là, la fonction qui exécute un rappel est déclenchée.

---

Premier pas

const observer = new IntersectionObserver(callbackFunction, options)
observer.observer(elementToObserver)

L'objet constructeur observateur d'intersection a besoin de deux arguments :

1. Une fonction de rappel
2. Options

C'est tout, nous sommes prêts à voir de l'action, mais d'abord, nous devons savoir ce que signifie chaque option, l'argument options est un objet avec les valeurs suivantes :

const options = {
  root: null,
  rootMargin: "0px",
  threshold: 1
}

• root : L'élément qui est utilisé comme fenêtre d'affichage pour vérifier la visibilité de la cible. Doit être l'ancêtre de la cible. La valeur par défaut est la fenêtre d'affichage du navigateur si elle n'est pas spécifiée ou si elle est nulle.
• rootMargin : Cet ensemble de valeurs est utilisé pour augmenter ou diminuer chaque côté du cadre de délimitation de l'élément racine avant de calculer les intersections, les options sont similaires à celles de la marge en CSS.
• seuil : Un nombre unique ou un tableau de nombres qui indique à quel pourcentage de visibilité de la cible le rappel de l'observateur doit être exécuté, compris entre 0 et 1,0, où 1,0 signifie que chaque pixel est visible dans la fenêtre.

---

Utilisation dans React

Nous allons maintenant voir une implémentation de l'API d'observateur d'intersection dans React.

const observer = new IntersectionObserver(callbackFunction, options)
observer.observer(elementToObserver)

1. Commencez par une référence à l'élément que nous voulons observer, utilisez le hook de réaction useRef.
2. Créez une variable d'état isVisible, nous l'utiliserons pour afficher un message chaque fois que notre boîte est dans la fenêtre.
3. Déclarons la fonction de rappel qui recevra un tableau d'IntersectionObserverEntries en tant que paramètre, dans cette fonction nous prenons la première et unique entrée et vérifions si elle coupe la fenêtre et si c'est le cas, nous appelons setIsVisible avec la valeur d'entrée .isIntersecting (vrai / FAUX).
4. Créez l'objet options avec les mêmes valeurs que l'image.
5. Ajoutez le hook de réaction useEffect et créez un constructeur d'observateur en utilisant la fonction de rappel et les options que nous venons de créer précédemment. C'est facultatif dans notre cas, mais cela peut renvoyer une fonction de nettoyage pour ne plus surveiller notre cible lorsque le composant est démonté.
6. Définissez la variable useRef sur l'élément que nous voulons observer.

const options = {
  root: null,
  rootMargin: "0px",
  threshold: 1
}

1. Ajoutons un peu de style à ce code HTML.

1. C'est tout ce dont nous avons besoin, simple et facile !

N'oubliez pas qu'il ne s'agit que d'une implémentation de base et qu'il existe plusieurs façons de procéder.

---

Nous allons maintenant implémenter le même code que précédemment, mais en séparant toute la logique dans un nu hook appelé useElementOnScreen.

const containerRef = useRef(null)
const [isVisible, setIsVisible] = useState(false)

const callbackFunction = (entries) => {
  const [entry] = entries
  setIsVisible(entry.isIntersecting)
}

const options = {
  root: null,
  rootMargin: "0px",
  threshold: 1.0
}

useEffect(() => {
  const observer = new IntersectionObserver(callbackFunction, options)
  if (containerRef.current) observer.observe(containerRef.current)

  return () => {
    if (containerRef.current) observer.unobserve(containerRef.current)
  }

}, [containerRef, options])

return (
  <div className="app">
    <div className="isVisible">{isVisible ? "IN VIEWPORT" : "NOT IN VIEWPORT"}</div>
    <div className="section"></div>
    <div className="box" ref={containerRef}>Observe me</div>
  </div>
)

1. Créez une nouvelle fonction appelée useElementOnScreen avec des options de paramètres
2. Déplacez l'intégralité de useRef, useState et useEffect dans notre nouveau hook.
3. Maintenant, la seule chose qui manque à notre hook est l'instruction return, nous passons isVisible et containersRef sous forme de tableau.
4. ok, on y est presque, il ne reste plus qu'à l'appeler dans notre composant et voir si ça marche !

<div className="box" ref={containerRef}>Observe me</div>

1- Importez le hook nouvellement créé dans notre composant.
2 - Initialisez-le avec l'objet options.
3 - C'est ainsi qu'on termine.

Félicitations, nous avons utilisé avec succès l'API d'observateur d'intersection et avons même créé un hook pour celle-ci !

---

Crédits

Intersection Observer utilisant React, écrit à l'origine par des producthackers

Merci d’avoir lu cet article. J'espère pouvoir vous fournir des informations utiles. Si tel est le cas, je serais très heureux si vous recommandiez cet article et cliquiez sur le bouton ♥ pour que davantage de personnes puissent le voir.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!