Create a scroll status in ReactJS using Material-UI

04 Mar, 2021
Progress bars at the top, showing scroll status are very common nowadays in webpages. Also, ReactJS and Material-UI go pretty well along with each other, React-JS being the most popular JavaScript framework for building UI components and Material-UI a library that provides various useful and reusable react components.
Creating React Application And Installing Module:
Step 1: Create a React application using the following command.
npx create-react-app gfg
Step 2: After creating your project folder i.e. gfg, move to it using the following command.
cd gfg
Step 3: After creating the ReactJS application, Install the material-ui modules using the following command.
npm install @material-ui/core
Now, create a new file status.js and put a gfg logo ‘gfg.png’ in the src folder,
Project Structure: It will look like the following:
Progress bars in Material-UI are of two types:
Determinate: Progress status is controlled using a variable.Indeterminate: Progress status is indeterminate.
Determinate: Progress status is controlled using a variable.
Indeterminate: Progress status is indeterminate.
We will use the Linear Determinate progress bar for displaying the scroll status of our app. The value prop of ‘LinearProgress’ component determines the value of the progress indicator between 0 to 100.
Adding state: We add a state ‘progress’ which is the variable controlling the length of the progress of our progress bar using the ‘State’ hook provided by React. ‘setProgress’ is the method that updates the value of this state variable.
const [progress, setProgress] = React.useState(0);
Using the ‘Effect’ hook: The Effect Hook lets us perform side effects in functional components in react. It performs the effect method after every re-rendering of the component.
status.js
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>  );}
App.js
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;
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Material-UI
React-Questions
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Axios in React: A Guide for Beginners
ReactJS useNavigate() Hook
How to do crud operations in ReactJS ?
How to install bootstrap in React.js ?
How to Use Bootstrap with React?
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
Differences between Functional Components and Class Components in React