Create a scroll status in ReactJS using Material-UI
Last Updated :
21 Nov, 2023
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.
Prerequisites:
Steps to Create the React Application And Installing Module:
Step 1: Create a React application using the following command.
npx create-react-app gfg
Step 2: Move to the project directory.
cd gfg
Step 3: Install the material-ui modules using the following command.
npm install @material-ui/core
Project Structure:
package.json:
"dependencies": {
"@material-ui/core": "^4.12.4",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4",
}
Progress Bars in Material-UI are of two types:
- Determinate: Progress status is controlled using a variable.
- Indeterminate: Progress status is indeterminate.
Approach: 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);
Example: Below is the practical implementation of the scroll status using ReactJS
Javascript
import React from 'react';
import StatusBar from './Component/StatusBar';
import CssBaseline from '@material-ui/core/CssBaseline';
import Container from '@material-ui/core/Container';
import Typography from '@material-ui/core/Typography';
const gfglogo =
function App() {
const paras = [1, 2, 3, 4, 5, 6];
return (
<React.Fragment>
<CssBaseline />
{}
<StatusBar></StatusBar>
<br></br>
{paras.map(para => (
<Container maxWidth="xs" key={para}>
<div style={{
display: 'flex',
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
backgroundRepeat: 'none',
}}>
<Typography component="h1"
variant="h2" align="center"
color="textPrimary" gutterBottom>
Hello World
</Typography>
<img src={gfglogo} alt=""
style=
{
{
width: "80px",
marginBottom: "10px"
}
} />
<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;
|
Javascript
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 = () => {
const scrolled =
document.documentElement.scrollTop;
const scrollLength = document.documentElement.scrollHeight -
document.documentElement.clientHeight;
const progress =
`${100 * scrolled / scrollLength}`;
setProgress(progress);
}
window.addEventListener("scroll", computeProgress);
return () =>
window.removeEventListener("scroll", computeProgress);
});
return (
<div className={classes.root}>
<LinearProgress
variant="determinate"
value={progress} />
</div>
);
}
|
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:
Output
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...