How to Create Scroll Indicator using ReactJS ?

Scroll Indicator in React JS refers to a representation of the length of the page visited or present on the screen. It shows the amount the pages that have been scrolled.

Prerequisite

• Node.js & npm
• React JS
• styled-components
• React JS useState() hooks.

Approach to create Scroll Indicator

To create a Scroll Indicator using ReactJS we will use a scroll event with window.addEventListener to capture the scroll and update the scroll indicator accordingly. Styled components are used to define the styles and CSS for reusable components.

Steps to create React Application

Step 1: You will start a new project using create-react-app command.

npx create-react-app react-scroll-indicator

Step 2: Now go to your react-scroll-indicator folder by typing the given command in the terminal.

cd react-scroll-indicator

Step 3: Install the dependencies required in this project by typing the given command in the terminal:

npm install --save styled-components

Project Structure:

Dependencies list after installing packages

{
    "dependencies": {
        "@testing-library/jest-dom": "^5.17.0",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-scripts": "5.0.1",
        "styled-components": "^6.1.0",
        "web-vitals": "^2.1.4"
    }
}

Example: This example shows Scroll Indicator with the help of eventlisterners and styled-components.

Javascript

// Filename - App.js

import ScrollIndicator from "./components/ScrollIndicator";

function App() {
    return <ScrollIndicator />;
}

export default App;

Javascript

// Filename - components/ScrollIndicator.js

import React, { useState, Fragment } from "react";
import {
    Container,
    ProgressBar,
    ScrollContent,
    Heading,
    Heading2,
} from "./Styles";
const ScrollIndicator = () => {
    const [scroll, setScroll] = useState(0);

    const onScroll = () => {
        const Scrolled = document.documentElement.scrollTop;
        const MaxHeight =
            document.documentElement.scrollHeight -
            document.documentElement.clientHeight;
        const ScrollPercent = (Scrolled / MaxHeight) * 100;
        setScroll(ScrollPercent);
    };

    window.addEventListener("scroll", onScroll);

    return (
        <Fragment>
            <Container>
                <ProgressBar
                    style={{ width: `${scroll}%` }}
                ></ProgressBar>
            </Container>
            <ScrollContent>
                <Heading>GeeksforGeeks</Heading>
                <Heading2>
                    React Example for Scroll Indicator
                </Heading2>
            </ScrollContent>
        </Fragment>
    );
};

export default ScrollIndicator;

Javascript

// Filename - components/Styles.js

import styled from "styled-components";

export const Container = styled.div`
    background-color: black;
    height: 10px;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    border-radius: 10px;
`;

export const ProgressBar = styled.div`
    height: 10px;
    background-color: green;
    border-radius: 10px;
`;
export const ScrollContent = styled.div`
    overflowy: scroll;
    height: 2000px;
`;

export const Heading = styled.h1`
    text-align: center;
    color: green;
    font-size: 3rem;
`;
export const Heading2 = styled.h1`
    text-align: center;

    font-size: 2rem;
`;

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