Cree un estado de desplazamiento en ReactJS usando Material-UI

Las barras de progreso en la parte superior, que muestran el estado de desplazamiento, son muy comunes hoy en día en las páginas web. Además, ReactJS y Material-UI funcionan bastante bien entre sí, siendo React-JS el marco de JavaScript más popular para crear componentes de interfaz de usuario y Material-UI, una biblioteca que proporciona varios componentes de reacción útiles y reutilizables.

Creación de la aplicación React e instalación del módulo:

Paso 1: Cree una aplicación React usando el siguiente comando.

npx create-react-app gfg

Paso 2: después de crear la carpeta de su proyecto, es decir, gfg , acceda a ella con el siguiente comando.

cd gfg

Paso 3: Después de crear la aplicación ReactJS, instale los módulos material-ui usando el siguiente comando.

npm install @material-ui/core

Ahora, cree un nuevo archivo status.js y coloque un logotipo gfg ‘gfg.png’ en la carpeta src,

Estructura del proyecto: Tendrá el siguiente aspecto:

Las barras de progreso en Material-UI son de dos tipos:

1. Determinado: el estado de progreso se controla mediante una variable.
2. Indeterminado: el estado de progreso es indeterminado.

Usaremos la barra de progreso Linear Determinate para mostrar el estado de desplazamiento de nuestra aplicación. La propiedad de valor del componente ‘LinearProgress’ determina el valor del indicador de progreso entre 0 y 100.

Agregando estado: agregamos un estado ‘progreso’ que es la variable que controla la longitud del progreso de nuestra barra de progreso usando el enlace ‘Estado’ proporcionado por React. ‘setProgress’ es el método que actualiza el valor de esta variable de estado.

const [progress, setProgress] = React.useState(0);

Usando el gancho ‘Efecto’: El gancho de efecto nos permite realizar efectos secundarios en componentes funcionales en reaccionar. Realiza el método de efecto después de cada renderizado del componente.

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import LinearProgress from '@material-ui/core/LinearProgress';
  
const useStyles = makeStyles({
  root: {
    position: 'fixed',
    width: '100%',
  },
});
  
  
export default function StatusBar() {
  const classes = useStyles();
  const [progress, setProgress] = React.useState(0);
  
  React.useEffect(() => {
  
    let computeProgress = () => {
      // The scrollTop gives length of window that has been scrolled
      const scrolled = document.documentElement.scrollTop;
      // scrollHeight gives total length of the window and 
      // The clientHeight gives the length of viewport
      const scrollLength = document.documentElement.scrollHeight - 
      document.documentElement.clientHeight;
      const progress = `${100*scrolled/scrollLength}`;
  
      setProgress(progress);
    }
  
    // Adding event listener on mounting
    window.addEventListener("scroll", computeProgress);
  
    // Removing event listener upon unmounting
    return () => window.removeEventListener("scroll", computeProgress);
  });
  
  return (
    <div className={classes.root}>
      <LinearProgress variant="determinate" value={progress} />
    </div>
  );
}

import React, { Component } from 'react';
import './App.css';
import StatusBar from './status';
import gfglogo from "./gfg.png"
import CssBaseline from '@material-ui/core/CssBaseline';
import Container from '@material-ui/core/Container';
import Typography from '@material-ui/core/Typography';
  
function App() {
  const paras = [1, 2, 3, 4, 5, 6];
  return (
    <React.Fragment>
      <CssBaseline />
  
      {/* Status bar component */}
      <StatusBar></StatusBar>
  
      <br></br>
      {paras.map(para => (
        <Container maxWidth="xs" key={para}>
          <div style={{ backgroundImage: `url(${gfglogo})`, 
          display: 'inline-block', 
          backgroundRepeat: 'none', }}>
            <Typography component="h1" variant="h2" align="center" 
            color="textPrimary" gutterBottom>
              Hello World
            </Typography>
            <Typography variant="h5" align="center" color="textSecondary" 
            paragraph>
            Something short and leading about the collection below—its contents, 
            the creator, etc. Make it short and sweet, but not too short.
            </Typography>
          </div>
          <br /><br />
        </Container>
      ))}
    </React.Fragment>
  );
}
  
export default App;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida: