Create a scroll status in ReactJS using Material-UI
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.
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.
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.
Step to Run Application: Run the application using the following command from the root directory of the project:
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Please Login to comment...