Cómo desplazarse hacia arriba en React con un componente de botón

Introducción

los "desplazarse hacia arriba" es una gran adición a cualquier sitio web que requiera que los visitantes se desplacen una gran distancia antes de llegar al final de la página, ya que se vuelve bastante aburrido volver a la parte superior.

En esta guía práctica, aprenderemos a crear un botón Reaccionar que permita a los usuarios "desplazarse hacia arriba". Usaremos ganchos React y lo convertiremos en un componente reutilizable. Al final de este artículo veremos cómo hacerlo con el react-scroll-to-top Biblioteca.

Usando React y React Hooks

Para características simples como esta, puede codificar fácilmente una solución desde cero, en lugar de instalar una biblioteca. ¡Crear características como esta desde cero permite una mayor personalización y apreciación de lo que encapsulan las bibliotecas!

Comenzar

Crearemos un componente separado, produciendo una pieza de código reutilizable que se puede distribuir entre sus proyectos. También usaremos un icono de flecha de react-icons para esta guía, sin embargo, cualquier ícono que funcione para usted funcionará igual de bien.

Instalación iconos de reacción

Usar react-icons, necesita instalar el módulo. puedes instalar react-icons con:

$ npm i react-icons

Desplácese hacia arriba en Reaccionar

Importemos la biblioteca y el icono en sí, y configurémoslos como un componente:

import React from 'react';
import { FaAngleUp } from 'react-icons/fa';

import './index.css';

const ScrollToTop = () => {
    return (
        <div className="top-to-btm">
            <FaAngleUp className="icon-position icon-style" />
        </div>
    );
};
export default ScrollToTop;

Apliquemos también algo de estilo al ícono y agreguemos animación de movimiento en index.css:

.top-to-btm{
  position: relative;
}
.icon-position{
  position: fixed;
  bottom: 40px;
  right: 25px;
  z-index: 20;
}
.icon-style{
  background-color: #551B54;
  border: 2px solid #fff;
  border-radius: 50%;
  height: 50px;
  width: 50px;
  color: #fff;
  cursor: pointer;
  animation: movebtn 3s ease-in-out infinite;
  transition: all .5s ease-in-out;
}
.icon-style:hover{
  animation: none;
  background: #fff;
  color: #551B54;
  border: 2px solid #551B54;
}
@keyframes movebtn {
  0%{
    transform: translateY(0px);
  }
  25%{
    transform: translateY(20px);
  }
  50%{
    transform: translateY(0px);
  }
  75%{
    transform: translateY(-20px);
  }
  100%{
    transform: translateY(0px);
  }
}

¡Increíble! Ahora podemos implementar la lógica que devuelve al usuario a la parte superior de la página.

Implementación lógica

Usaremos el useState() y useEffect() ganchos que nos permiten desarrollar la característica fácil y rápidamente.

import React, { useState, useEffect } from 'react';

El siguiente paso es crear un state y configúralo en false por defecto; este estado controlará la visibilidad del botón "desplazarse hacia arriba"ya que queremos que el botón aparezca solo después de que el usuario se haya desplazado un poco hacia abajo y que desaparezca después de que el usuario se haya desplazado completamente hacia arriba:

const [showTopBtn, setShowTopBtn] = useState(false);

En este punto utilizaremos el useEffect() gancho para construir la lógica que determina cuándo queremos que aparezca el botón y cuándo queremos que desaparezca.

Notar: los Gancho de efecto está activo por defecto después del renderizado inicial y cada vez que se actualiza el estado. Se utiliza para impulsar un efecto cada vez que cambia el estado, como sugiere el nombre.

Pongamos el estado en true después de que el usuario se haya desplazado hacia abajo 400 píxeles:

useEffect(() => {
    window.addEventListener('scroll', () => {
        if (window.scrollY > 400) {
            setShowTopBtn(true);
        } else {
            setShowTopBtn(false);
        }
    });
}, []);

Agregamos un EventListener a la window para escuchar un pergamino, luego ejecutar una función cuando la condición en el oyente regrese true. Si la posición de desplazamiento vertical es mayor que 400 (según lo determine usted), la función establece el showTopBtn estado a true; de lo contrario, lo establece en false. Recuerde que esto funcionará constantemente a medida que se desplaza hacia abajo en la página web y, por lo tanto, actualice el botón para que deje de mostrarse cuando alguien se desplace hacia atrás a la parte superior de la página.

La última funcionalidad que querremos implementar es la gestión de click ¡un evento! Una vez que el usuario haga clic en el botón, desearemos desplazarlo hacia arriba. Afortunadamente - el window el objeto tiene un dedicado scrollTo() método exactamente para eso! Vamos a envolverlo con una función que llamaremos cuando un usuario haga clic en el botón:

const goToTop = () => {
    window.scrollTo({
        top: 0,
        behavior: 'smooth',
    });
};

Notar: window.scrollTo() también acepta un behavior parámetro que le permite especificar si el desplazamiento debe ser animado sin problemas (smooth), o ocurrir instantáneamente en un solo salto (autoel valor por defecto).

Finalmente, agreguemos un onclick() oyente para el botón en nuestro marcado, conectándolo al goToTop() método:

import React, { useState, useEffect } from "react";
import { FaAngleUp } from "react-icons/fa";

import "./index.css";

const ScrollToTop = () => {
    const [showTopBtn, setShowTopBtn] = useState(false);
    useEffect(() => {
        window.addEventListener("scroll", () => {
            if (window.scrollY > 400) {
                setShowTopBtn(true);
            } else {
                setShowTopBtn(false);
            }
        });
    }, []);
    const goToTop = () => {
        window.scrollTo({
            top: 0,
            behavior: "smooth",
        });
    };
    return (
        <div className="top-to-btm">
            {" "}
            {showTopBtn && (
                <FaAngleUp
                    className="icon-position icon-style"
                    onClick={goToTop}
                />
            )}{" "}
        </div>
    );
};
export default ScrollToTop;

¡Eso es! El componente ahora puede importarse a una nueva página y usarse. En el App.js archivo, vamos a importarlo:

import ScrollToTop from './ScrollToTop';

function App() {
    return (
        <div className="App">
            <ScrollToTop />
            <div className="section section1"></div>
            <div className="section section2"></div>
            <div className="section section3"></div>
            <div className="section section4"></div>
            <div className="section section5"></div>
        </div>
    );
}

export default App;

Al usar el desplazarse hacia arriba Biblioteca

los react-scroll-to-top La Biblioteca es un componente de botón ligero y personalizable, que se desplaza a la parte superior de la página cuando se hace clic. Este componente es análogo al nuestro, pero no es necesario que lo codifique usted mismo.

Naturalmente, solo aparece una vez que se ha desplazado lo suficiente como para que tenga sentido que aparezca.

Instalación desplazarse hacia arriba

Ejecute este comando en su terminal:

$ npm i react-scroll-to-top

Desplácese hacia arriba con desplazarse hacia arriba

Consulte nuestra guía útil y práctica para aprender Git, con las mejores prácticas, los estándares aceptados por la industria y la hoja de trucos incluida. Deja de buscar en Google los comandos de Git y, de hecho, aprender ¡esta!

Para usar el componente, importamos react-scroll-to-top y úsalo como usamos el nuestro:

Importar y luego incluir <ScrollToTop /> en cualquier lugar de su función de renderizado/retorno:

import ScrollToTop from "react-scroll-to-top";

function App() {
    return (
        <div className="App">
            <ScrollToTop />
            <div className="section section1"></div>
            <div className="section section2"></div>
            <div className="section section3"></div>
            <div className="section section4"></div>
            <div className="section section5"></div>
        </div>
    );
}

export default App;

¡La biblioteca también es personalizable! Hay bastantes accesorios que puedes modificar para diferentes efectos.

Esto tiene tantos accesorios, y todos se enumeran a continuación con su descripción y el tipo de datos que toman:

Apoyar Pegar La descripcion Culpa
suave booleano Si desea utilizar el desplazamiento suave* falso
Elevado número Altura después de desplazar la página para ser visible 20
Color cadena de caracteres color de relleno del icono SVG "negro"
svgPath cadena de caracteres El atributo de ruta del icono SVG Un camino señalizado
largo cadena de caracteres Ancho del icono SVG "28"
la talla cadena de caracteres Altura del icono SVG "28"
viewBox cadena de caracteres El atributo viewBox del icono SVG "0 0 256 256"
Componiendo ninguna Componente para reemplazar el icono SVG. Ver ejemplos
estilo Objeto Objeto para agregar/reemplazar estilo
Nombre del curso cadena de caracteres Nombre de clase para anular completamente el estilo

Conclusión

En esta guía, aprendimos cómo crear un componente reutilizable, desde cero, para realizar fácilmente la operación de desplazamiento hacia arriba. ¡Este componente es fácilmente transferible entre proyectos! Simplemente transfiera archivos relacionados e impórtelos a una nueva página. Finalmente, echamos un vistazo a una biblioteca popular que se encarga de ello por nosotros, así como los accesorios asociados con la personalización.

Si quieres conocer otros artículos parecidos a Cómo desplazarse hacia arriba en React con un componente de botón puedes visitar la categoría Código.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas