Cómo implementar el desplazamiento suave en React

Introducción

El desplazamiento suave es cuando, en vez de hacer clic en un botón y ser dirigido de forma instantánea a una parte diferente de la misma página, el usuario navega allí mediante una animación de desplazamiento. Es una de esas sutiles funciones de la IU en un sitio web que marcan una diferencia estética.

En este artículo, va a usar el paquete react-scroll en npm para implementar el desplazamiento suave.

Requisitos previos

Necesitará lo siguiente para completar este tutorial:

• Una instalación Git válida. Para configurar esto, revise el tutorial Primeros pasos con Git.
• Node.js se instala localmente, lo que puede hacer siguiendo el tutorial Cómo instalar Node.js y crear un entorno de desarrollo local.

Este tutorial se verificó con Node v13.14.0, npm v6.14.5, react v16.13.1 y react-scroll v.1.7.16.

Inicio rápido: Usar react-scroll

Creará una aplicación sencilla en este tutorial, pero si desea un resumen rápido de cómo funciona react-scroll, consulte estos pasos resumidos:

Instale react-scroll:

npm i -S react-scroll

Importe el paquete react-scroll:

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

Añada el componente de enlace. El componente <Link /> apuntará a un área concreta de su aplicación:

<Link to="section1">

Vamos a profundizar un poco más y crear una pequeña aplicación React con desplazamiento suave.

Paso 1: Instalar y ejecutar una aplicación React

Para mayor comodidad, este tutorial usará un proyecto React de inicio (usando Create React App 2.0) que tiene una barra de navegación (o navbar) en la parte superior junto con cinco secciones de contenido diferentes.

Los enlaces en la navbar son solo etiquetas de anclaje en este momento, pero las actualizará en breve para permitir el desplazamiento suave.

Puede encontrar el proyecto en React con desplazamiento suave. Observe que este enlace es para la rama start. La rama master incluye todos los cambios terminados.

Para clonar el proyecto, puede usar el siguiente comando:

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

Si observa el directorio src/Components, encontrará un archivo Navbar.js que contiene la <Navbar> con nav-items que corresponden a cinco <Section> diferente.

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>
    );
  }
}

A continuación, si abre el archivo App.js en el directorio src, verá dónde se incluye la <Navbar> junto con las cinco <Section> reales.

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;

Cada componente <Section> asume un título y un subtítulo.

Ya que este proyecto utiliza texto ficticio en las secciones diferentes, para reducir que se repita el código, este texto se añadió a un archivo DummyText.js, se importa y se pasa a cada componente <Section>.

Para ejecutar la aplicación, puede usar los siguientes comandos.

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

Esto iniciará la aplicación en modo de desarrollo y actualizará la aplicación automáticamente cuando la guarda en sus archivos. Puede verla en el navegador en localhost:3000.

Paso 2: Instalar y configurar el desplazamiento en React

Ahora, es momento de instalar el paquete react-scroll y añadir dicha funcionalidad. Puede encontrar información para el paquete en npm.

Para instalar el paquete, ejecute el siguiente comando:

npm install react-scroll

A continuación, abra la copia de seguridad del archivo Navbar.js y añada una importación para dos importaciones nombradas, Link y animateScroll.

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

Observe que hemos llamado a animatedScroll solo scroll para facilitar el uso.

Con todas sus importaciones definidas, ahora puede actualizar sus nav-items para usar el componente <Link>. Este componente tiene varias propiedades. Puede leer sobre todas ellas en la página de documentación.

Por ahora, preste especial atención a activeClass, to spy, smooth, offset y duration.

• activeClass: La clase aplicada cuando se llega al elemento.
• to: El objetivo hasta donde desplazarse.
• spy: Para seleccionar Link cuando scroll está en su posición objetivo.
• smooth: Para animar el desplazamiento.
• offset: Para desplazar px adicional (como padding).
• duration: El tiempo de la animación de desplazamiento. Esto puede ser un número o una función.

La propiedad to es la parte más importante, ya que indica al componente hasta qué elemento desplazarse. En este caso, esto será cada una de sus <Section>.

Con la propiedad offset, puede definir una cantidad adicional de desplazamiento que realizar para llegar a cada <Section>.

Aquí tiene un ejemplo de las propiedades que usará para cada componente <Link>. La única diferencia entre ellos será la propiedad to ya que cada una apunta a una <Section> diferente:

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

Deberá actualizar cada uno de los nav-items. Con estos añadidos, debería poder volver a su navegador (su aplicación debería haberse reiniciado automáticamente) y ver el desplazamiento suave en acción.

Paso 3: Dar estilo a los enlaces activos

La propiedad activeClass le permite definir una clase para aplicar al componente <Link> cuando su elemento to esté activo. Un <Link> se considera activo si su elemento to está a la vista cerca de la parte superior de la página. Esto puede activarse haciendo clic en el <Link> o desplazándose hasta la <Section> manualmente.

Para demostrar esto, he abierto las DevTools de Chrome e inspeccionado el quinto <Link> como se muestra a continuación. Al hacer clic en ese <Link> o desplazarme manualmente hasta la parte inferior de la página, observé que la clase activa se ha aplicado de hecho.

Para aprovechar esto, puede crear una clase activa y añadir un subrayado al enlace. Puede añadir este trozo de CSS en el archivo App.css en el directorio src:

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

Ahora, si vuelve a su navegador y se desplaza un poco, debería ver que el <Link> apropiado está subrayado.

Paso 4: Añadir funciones adicionales

Para un poco más de contenido, por último, este paquete también proporciona algunas funciones que pueden invocarse directamente como scrollToTop, scrollToBottom, etc. Además de varios eventos que puede administrar.

En referencia a estas funciones, normalmente, el logotipo de la aplicación en una navbar llevará al usuario a la página de inicio o a la parte superior de la página actual.

Como ejemplo sencillo de cómo invocar una de estas funciones proporcionadas, añadí un controlador de clic al nav-logo para desplazar al usuario de vuelta a la parte superior de la página, de esta forma:

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

De vuelva en el navegador, debería poder desplazarse hacia abajo en la página, hacer clic en el logotipo en la navbar y volver a la parte superior de la página.

Conclusión

El desplazamiento suave es una de esas funciones que pueden añadir mucho valor estético a su aplicación. El paquete react-scroll le permite aprovechar esta función sin un esfuerzo significativo.

En este tutorial, ha añadido el desplazamiento suave a una aplicación y ha experimentado con los diferentes ajustes. Si siente curiosidad, pase algún tiempo explorando las otras funciones y eventos que este paquete ofrece.