Comment mettre en œuvre le défilement fluide dans React

Introduction

On parle de défilement fluide lorsque, au lieu de cliquer sur un bouton et d’être instantanément dirigé vers une autre partie de la même page, l’utilisateur y est dirigé par une animation de défilement. C’est l’une de ces subtiles fonctionnalités de l’interface utilisateur sur un site qui fait une différence esthétique.

Dans cet article, vous allez utiliser le paquet react-scroll sur npm pour mettre en place un défilement fluide.

Conditions préalables

Vous aurez besoin des éléments suivants pour compléter ce tutoriel :

• Une installation Git valide. Pour ce faire, il faut revoir le tutoriel Démarrer avec Git.
• Node.js installé localement, ce que vous pouvez faire en suivant le tutoriel Comment installer Node.js et créer un environnement de développement local.

Ce tutoriel a été vérifié avec Node v13.14.0, npm v6.14.5, react v16.13.1, et react-scroll v.1.7.16.

Démarrage rapide : utiliser react-scroll

Vous allez créer une application simple dans ce tutoriel, mais si vous souhaitez avoir un aperçu rapide du fonctionnement de react-scroll, n’hésitez pas à vous référer à ces étapes condensées :

Installez react-scroll:

npm i -S react-scroll

Importez le paquet react-scroll :

import { Link, animateScroll as scroll } from "react-scroll";

Ajoutez le composant de lien. Le composant <Link /> pointera vers une certaine zone de votre application :

<Link to="section1">

Plongeons plus profondément et construisons une petite application React avec un défilement fluide.

Étape 1 - Installer et exécuter une application React

Pour plus de commodité, ce tutoriel utilisera un projet de démarrage React (en utilisant Create React App 2.0) qui comporte une barre de navigation (ou navbar) dans la partie supérieure, ainsi que cinq sections de contenu différentes.

Les liens dans la barre de navigation ne sont pour l’instant que des balises d’ancrage, mais vous les mettrez bientôt à jour pour permettre un défilement fluide.

Vous pouvez trouver le projet sous React with smooth scrolling. Veuillez noter que ce lien est pour la branche start. La branche master comprend toutes les modifications terminées.

Pour cloner le projet, vous pouvez utiliser la commande suivante :

git clone https://github.com/do-community/React-With-Smooth-Scrolling.git

Si vous vous intéressez au répertoire src/components vous trouverez un répertoire Navbar.js qui contient le fichier <Navbar> avec les nav-items correspondant à cinq <Section>s différentes.

import React, { Component } from "react";
import logo from "../logo.svg";

export default class Navbar extends Component {
  render() {
    return (
      <nav className="nav" id="navbar">
        <div className="nav-content">
          <img
            src={logo}
            className="nav-logo"
            alt="Logo."
            onClick={this.scrollToTop}
          />
          <ul className="nav-items">
            <li className="nav-item">Section 1</li>
            <li className="nav-item">Section 2</li>
            <li className="nav-item">Section 3</li>
            <li className="nav-item">Section 4</li>
            <li className="nav-item">Section 5</li>
          </ul>
        </div>
      </nav>
    );
  }
}

Ensuite, si vous ouvrez les App.js dans le répertoire src, vous verrez où se trouve le <Navbar> avec les cinq <Section>s"

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import Navbar from "./Components/Navbar";
import Section from "./Components/Section";
import dummyText from "./DummyText";
class App extends Component {
  render() {
    return (
      <div className="App">
        <Navbar />
        <Section
          title="Section 1"
          subtitle={dummyText}
          dark={true}
          id="section1"
        />
        <Section
          title="Section 2"
          subtitle={dummyText}
          dark={false}
          id="section2"
        />
        <Section
          title="Section 3"
          subtitle={dummyText}
          dark={true}
          id="section3"
        />
        <Section
          title="Section 4"
          subtitle={dummyText}
          dark={false}
          id="section4"
        />
        <Section
          title="Section 5"
          subtitle={dummyText}
          dark={true}
          id="section5"
        />
      </div>
    );
  }
}

export default App;

Chaque <Section> prend en compte un titre et sous-titre.

Comme ce projet utilise du texte factice dans les différentes sections, pour réduire la répétition du code, ce texte a été ajouté à un fichier DummyText.js importé et transmis dans chaque composant <Section>.

Pour exécuter l’application, vous pouvez utiliser les commandes suivantes.

cd React-With-Smooth-Scrolling
npm install
npm start

Cela lancera l’application en mode développement et la rafraîchira automatiquement lorsque vous enregistrerez vos fichiers. Vous pouvez le consulter dans le navigateur à l’adresse suivante localhost:3000.

Étape 2 - Installer et configurer React-Scroll

Il est maintenant temps d’installer react-scroll et ajouter cette fonctionnalité. Vous pouvez trouver des informations pour le paquet sur npm.

Pour installer le paquet, exécutez la commande suivante :

npm install react-scroll

Ensuite, ouvrez le fichier Navbar.js et ajoutez une importation pour deux importations nommées, Link et animateScroll.

import { Link, animateScroll as scroll } from "react-scroll";

Vous remarquerez que j’ai créé un alias animatedScroll à faire défiler pour faciliter l’utilisation.

Une fois toutes vos importations définies, vous pouvez maintenant mettre à jour vos articles de navigation pour utiliser le composant <Link>. Ce composant prend plusieurs propriétés. Vous pouvez tout lire sur elles sur la page de documentation.

Pour l’instant, il convient d’accorder une attention particulière à activeClass, to, spy, smooth, offset et duration.

• activeClass - La classe appliquée lorsque l’élément est atteint.
• a - La cible jusqu’où défiler.
• spy - Pour que Link soit sélectionné lorsque scroll est à la position de sa cible.
• smooth - Pour animer le défilement.
• offset - Pour faire défiler des px supplémentaires (comme du padding).
• duration - L’heure de l’animation de défilement Il peut s’agir d’un numéro ou d’une fonction.

La propriété to est la partie la plus importante car elle indique à la composante quel élément faire défiler. Dans ce cas, il s’agira de chacune de vos <Section>s.

Avec la propriété offset, vous pouvez définir une quantité supplémentaire de défilement à effectuer pour atteindre chaque <Section>.

Voici un exemple des propriétés que vous utiliserez pour chaque composant <Link>. La seule différence entre elles sera la propriété to, car elles pointent chacune vers une <Section> :

<Link
    activeClass="active"
    to="section1"
    spy={true}
    smooth={true}
    offset={-70}
    duration={500}
>

Vous devrez mettre à jour chacun des nav-items en conséquence. Avec ces ajouts, vous devriez pouvoir retourner à votre navigateur (votre application devrait déjà avoir redémarré automatiquement) et voir un défilement fluide en action.

Étape 3 - Styler des liens actifs

La propriété activeClass vous permet de définir une classe à appliquer au composant <Link> lorsque son to est actif. Un <Link> est considéré comme actif si son élément to est visible près du haut de la page. Cela peut être déclenché en cliquant sur le <Link> lui-même ou en faisant défiler l’écran jusqu’à la <Section> manuellement.

Pour le prouver, j’ai ouvert le Chrome DevTools et j’ai inspecté le cinquième <Link> comme indiqué ci-dessous. Quand j’ai cliqué sur ce <Link> ou fait défiler manuellement au bas de la page, j’ai remarqué que la classe active est, en fait, appliquée.

Pour en profiter, vous pouvez créer une classe active et ajouter un soulignement au lien. Vous pouvez ajouter ce morceau de CSS dans le fichier App.css dans le répertoire src :

.nav-item > .active {
    border-bottom: 1px solid #333;
}

Maintenant, si vous retournez à votre navigateur et faites défiler un peu, vous devriez voir que le <Link> approprié est souligné.

Étape 4 - Ajouter des fonctions supplémentaires

Pour une dernière partie du contenu, ce paquet fournit également quelques fonctions qui peuvent être appelées directement comme scrollToTop, scrollToBottometc. ainsi que divers événements que vous pouvez gérer.

En référence à ces fonctions, le logo de l’application dans une barre de navigation amène généralement l’utilisateur à la page d’accueil ou au haut de la page en cours.

Pour illustrer simplement la façon d’appeler une de ces fonctions fournies, j’ai ajouté un gestionnaire de clics à la nav-logo, afin de faire défiler l’utilisateur vers le haut de la page, comme ça :

scrollToTop = () => {
    scroll.scrollToTop();
};

De retour dans le navigateur, vous devriez pouvoir faire défiler la page vers le bas, cliquer sur le logo dans la barre de navigation et être ramené au haut de la page.

Conclusion

Le défilement fluide est l’une des caractéristiques qui peut ajouter beaucoup de valeur esthétique à votre application. Le paquetreact-scroll vous permet de tirer parti de cette fonctionnalité sans frais généraux importants.

Dans ce tutoriel, vous avez ajouté un défilement fluide à une application et expérimenté différents paramètres. Si vous êtes curieux, passez un peu de temps à explorer les autres fonctions et événements que ce paquet vous propose.