Observation de la position cible dans React : détection transparente du défilement et style de contenu dynamique

Avez-vous déjà été perdu en parcourant un long contenu, en vous demandant où vous en êtes dans le grand schéma des choses ? Nous y sommes tous allés. Pour faciliter les choses, j'ai créé un simple package npm qui vous aide à suivre votre position sur la page en mettant à jour la table des matières (TOC) au fur et à mesure que vous faites défiler. Que vous travailliez sur un site Web de documentation ou sur un projet comportant plusieurs sections, ce package est là pour vous aider.

Voir la démo ici.

Visitez la page d'accueil ici.

Qu'y a-t-il à l'intérieur du colis ?

Ce package est livré avec trois composants et un hook qui facilitent l'intégration du suivi de défilement dans votre site :

1. InViewProvider : C'est comme le cerveau de l'opération. Il garde une trace de la section actuellement affichée et s'assure que tout reste synchronisé. Enroulez-le simplement autour de la partie de votre application où vous souhaitez activer le suivi du défilement.

2. Cible : Considérez cela comme la balise que vous mettez sur chaque section de votre contenu. En encapsulant vos sections avec le composant Target, vous dites au package : « Hé, gardez un œil sur ça ! »

3. ObserveZone : C'est l'espace où se déroule toute l'action. Il s'agit d'un composant invisible qui surveille votre contenu et la cible, garantissant la mise à jour de la table des matières au fur et à mesure que vous faites défiler.

4. useInView : Un crochet pratique qui vous permet de savoir quand une section est visible. C'est parfait pour déclencher des animations, charger du contenu paresseux ou tout ce que vous souhaitez qu'il se produise lorsqu'une section apparaît.

Pourquoi cela pourrait vous être utile

• Gardez les utilisateurs sur la bonne voie : lorsque les utilisateurs font défiler votre contenu, ils peuvent facilement voir quelle section ils lisent car la table des matières se met automatiquement à jour. Ne vous perdez plus dans de longues pages !

• Cas d'utilisation polyvalents : bien qu'il soit idéal pour les sites de documentation, vous pouvez également utiliser ce package pour d'autres choses, comme déclencher des animations lorsque certaines sections apparaissent, charger du contenu paresseusement pour économiser des ressources ou même en effectuant des appels API lorsque les utilisateurs font défiler.

• Facile à mettre en œuvre : Le package est conçu pour être simple. Avec seulement quelques composants et un crochet, vous pouvez l'ajouter à vos projets React sans trop de tracas.

Cas d'utilisation possibles

• Sites de documentation : parfaits pour relier les éléments de la table des matières aux sections de contenu, afin que les utilisateurs sachent toujours où ils se trouvent.

• Animations et effets : Vous voulez ajouter du style ? Utilisez le hook useInView pour déclencher des animations lorsqu'une section entre dans la fenêtre.

• Chargement paresseux du contenu : économisez sur les temps de chargement en chargeant les composants uniquement lorsqu'ils sont nécessaires.

• Appels API dynamiques : récupérez des données ou chargez du contenu de manière dynamique lorsque les utilisateurs font défiler la page.

Comment commencer

Il est très simple de mettre en place ce package. Tout d'abord, installez-le via npm :

npm install target-observer

Ensuite, utilisez les composants de votre projet comme ceci :

import { InViewProvider, Target, ObserveZone, useInView } from 'target-observer';

function DocumentationPage() {
  return (
    <InViewProvider targetIds={["section1", "section2"]}>
      <div style={{ position: "relative" }}>
       <ObserveZone />
         <TableOfContents />
         <main>
           <Target id="section1"><Section1 /></Target>
           <Target id="section2"><Section2 /></Target>
           {/* Add more sections as needed */}
         </main>
      </div>
    </InViewProvider>
  );
}

Et c'est tout ! Avec ces quelques lignes de code, votre table des matières sera mise à jour au fur et à mesure que les utilisateurs font défiler, rendant la navigation un jeu d'enfant.

Conclure

Ce package npm est un moyen simple mais efficace d'améliorer la navigation de votre site Web. Que vous travailliez sur de la documentation ou sur tout autre projet riche en contenu, cet outil vous aide à garder les choses organisées et conviviales. J'espère que vous le trouverez aussi utile que moi !

Photo de couverture par Patrick Hendry sur Unsplash

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!