Como implementar uma rolagem suave no React

Introdução

A rolagem suave é quando em vez de clicar em um botão e ser imediatamente levado a uma parte diferente da mesma página, o usuário é enviado para lá através de uma animação de rolagem. É um daqueles recursos sutis de IU em um site que fazem uma grande diferença estética.

Neste artigo, você irá usar o pacote react-scroll no npm para implementar uma rolagem suave.

Pré-requisitos

Você precisará do seguinte para completar este tutorial:

• Uma instalação do Git válida. Para configurar isso, revise o tutorial Começando com o Git.
• O Node.js instalado localmente, o que pode ser feito seguindo o tutorial Como instalar o Node.js e criar um ambiente de desenvolvimento local.

Este tutorial foi verificado com o Node v13.14.0, npm v6.14.5, react v16.13.1 e o react-scroll v.1.7.16.

Início rápido: usando o react-scroll

Você irá construir um aplicativo simples neste tutorial, mas caso deseje um resumo rápido de como o react-scroll funciona, sinta-se a vontade para consultar estes passos condensados:

Instale o react-scroll:

npm i -S react-scroll

Importe o pacote react-scroll:

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

Adicione o componente de ligação. O componente <Link /> irá apontar para uma determinada área do seu aplicativo:

<Link to="section1">

Vamos nos aprofundar mais e construir um pequeno aplicativo React com rolagem suave.

Passo 1 — Instalar e executar um aplicativo React

Por questões de conveniência, este tutorial ira usar um projeto iniciador do React (usando o Create React App 2.0) que possui uma barra de navegação (ou navbar) no topo, juntamente com cinco seções distintas de conteúdo.

Os links na barra de navegação são apenas marcadores de ancoragem neste ponto, mas logo serão atualizados para habilitar a rolagem suave.

O projeto pode ser encontrado em React With Smooth Scrolling. Observe que esse link é para a ramificação de início. A ramificação mestre inclui todas as alterações finalizadas.

Para clonar o projeto, use o comando a seguir:

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

Se você olhar no diretório src/Components, irá encontrar um arquivo Navbar.js que contém o <Navbar> com nav-items correspondentes a cinco diferentes <Section>s.

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

Em seguida, se abrir o arquivo App.js no diretório src, verá onde o <Navbar> está incluído juntamente com as cinco <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;

Cada componente <Section> assume um title (título) e subtitle (subtítulo).

Como o projeto está usando textos fictícios nas diferentes seções, de forma a reduzir o código repetido, esse texto foi adicionado em um arquivo DummyText.js, importado e passado para cada componente <Section>.

Para executar o aplicativo, utilize os comandos a seguir.

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

Isso irá iniciar o aplicativo no modo de desenvolvimento e atualizar automaticamente o aplicativo quando for salvar seus arquivos. É possível visualizá-lo no navegador em localhost:3000.

Passo 2 — Instalando e configurando o react-scroll

Agora, é hora de instalar o pacote react-scroll e adicionar essa funcionalidade. Encontre mais informações para o pacote no npm.

Para instalar o pacote, execute o seguinte comando:

npm install react-scroll

Em seguida, abra o arquivo Navbar.js novamente e adicione um import para duas importações chamadas Link e animateScroll.

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

Observe que o nome animatedScroll foi alterado para scroll para facilitar o uso.

Com todas as importações definidas, atualize agora seus nav-items para usar o componente <Link>. Esse componente recebe várias propriedades. Leia mais sobre todas elas na página de documentação.

Por enquanto, preste bastante atenção no activeClass, to, spy, smooth, offset e duration.

• activeClass - a classe aplicada quando o elemento é atingido.
• to - o alvo para onde a rolagem é feita.
• spy - para tornar o Link selecionado quando o scroll estiver na posição do seu alvo.
• smooth - para animar a rolagem.
• offset - para rolar pixels adicionais (como um preenchimento).
• duration - o tempo que leva a animação de rolagem. Isso pode ser um número ou uma função.

A propriedade to é a mais importante, já que informa ao componente para qual elemento deve ser feita a rolagem. Neste caso, isso será cada uma das suas <Section>s.

Com a propriedade offset, é possível definir uma quantidade adicional de rolagem a ser feita de forma a chegar em cada <Section>.

Aqui está um exemplo das propriedades que você usará para cada componente <Link>. A única diferença entre eles será a propriedade to, já que cada uma delas aponta para uma <Section> distinta:

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

Será necessário atualizar cada um dos nav-items adequadamente. Com tudo isso adicionado, você deve ser capaz de voltar ao seu navegador (seu aplicativo já deve ter sido reiniciado automaticamente) e ver a rolagem suave em ação.

Passo 3 — Estilizando links ativos

A propriedade activeClass permite definir uma classe a ser aplicada no componente <Link> quando o seu elemento to estiver ativo. Um <Link> é considerado ativo se seu elemento to estiver em exibição próximo ao topo da página. Isso pode ser acionado clicando no <Link> em si ou rolando a página até a <Section> manualmente.

Para provar isso, o Chrome DevTools foi aberto e o quinto <Link> foi inspecionado, assim como mostrado abaixo. Ao clicar nesse <Link> ou manualmente rolar a página até o final, vê-se que a classe ativa foi, de fato, aplicada.

Para aproveitar isso, crie uma classe ativa e adicione um sublinhado ao link. Adicione este pequeno código CSS no arquivo App.css no diretório src:

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

Agora, caso volte para o seu navegador e role um pouco na página, perceberá que o <Link> apropriado está sublinhado.

Passo 4 — Adicionando funções adicionais

Para finalizar com mais um pouco de conteúdo, este pacote também fornece algumas funções que podem ser chamadas diretamente, como scrollToTop, scrollToBottom, etc., bem como diversos eventos que você pode manipular.

Em referência a essas funções, tipicamente, o logotipo do aplicativo em uma barra de navegação irá levar o usuário à página inicial ou ao topo da página atual.

Como um exemplo simples de como chamar uma dessas funções mencionadas, um manipulador de cliques foi adicionado ao nav-logo para trazer o usuário de volta ao topo da página, desta forma:

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

De volta no navegador, você deve ser capaz de rolar a página para baixo, clicar no logotipo na barra de navegação e ser levado de volta para o topo da página.

Conclusão

A rolagem suave é um daqueles recursos que pode adicionar um grande valor estético para seu aplicativo. O pacote react-scroll permite que você implemente esse recurso sem uma sobrecarga significativa.

Neste tutorial, você adicionou uma rolagem suave a um aplicativo e experimentou diferentes configurações. Se tiver curiosidade, explore as outras funções e eventos que este pacote tem a oferecer.