React Js Tutorial- How To Create Reading Indicator Progress Bar In A React Js App

React Reading Indicator Example; This React Js tutorial will show us how to build a reading progress bar or reading indicator component in React Js using React hooks with function components.

A reading progress bar is a peculiar yet informative UI component. It is generally placed on modern web and mobile apps to help us comprehend the reading progress of a post or an article.

 

In addition, we will be learning how to install and use the styled-components module to create the reading progress bar in React.

 

How To Build A Reading Progress In A React Js App

Step 1- Build A New App

As we know that the basic step is to install a new React app, and have the Node and NPM set up on our development system.

We will be doing so with the help of the below command:

npx create-react-app react-blog-app

Then, we move into the project folder:

cd react-blog-app

 

Step 2- Setting Up Bootstrap

Now, we have to install the bootstrap library for designing the basic layout of our app. Below-given is the command which will help us add the bootstrap module to our project:

npm i bootstrap

Afterward, we need to register the bootstrap in the src/App.js file:

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
function App() {
  return <div></div>;
}
export default App;

 

Step 3- Install Styled Components

The styled-components allow us to write the actual CSS in our React components. We can install it quite smoothly with the given command:

npm install styled-components

 

Step 4- Create Reading Bar Indicator In React

Since Bar Indicator Component requires certain modules and functions to be imported and added to the ReadingIndicator file.

Then, we update the given code in the components/ReadingIndicator.js file:

import { React, useState, useEffect } from "react";
import styled from "styled-components";
const HorizontalBar = styled.div`
  color: #fff;
  top: 0;
  left: 0;
  position: fixed;
  text-align: center;
  padding: 8px 0 8px 0;
  background: #f12711; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to right,
    #f5af19,
    #f12711
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #f5af19,
    #f12711
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
`;
function ReadingIndicator() {
  const [indicator, setIndicator] = useState(0);
  const scroller = () => {
    var element = document.documentElement,
      top = element.scrollTop || document.body.scrollTop,
      height = element.scrollHeight || document.body.scrollHeight;
    var calculate = (top / (height - element.clientHeight)) * 100;
    setIndicator(calculate);
  };
  useEffect(() => {
    window.addEventListener("scroll", scroller);
    return () => window.removeEventListener("scroll", scroller);
  }, [indicator]);
  return (
    <HorizontalBar style={{ width: indicator + "%" }}>
      {parseFloat(Math.round(indicator - 1)).toFixed(2)} %
    </HorizontalBar>
  );
}
export default ReadingIndicator;

 

Step 5- Build Post Function Component

Here, we will create the components/ folder and also make the Post.js file. This will be the layout for the posting page where the user scrolls and get to know how much text has been read:

import React from "react";
export default function Post() {
  return (
    <div>
      <h2>React Dynamic Reading Progress Bar Example</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquet
        nisi risus, a lacinia orci fermentum malesuada. Suspendisse eu ex
        faucibus, feugiat nisi id, viverra libero.
      </p>
      <p>
        Aenean pellentesque laoreet sem nec consequat. Cras vulputate quam
        velit, sed ultricies magna placerat ac. Vivamus faucibus tellus
        fringilla posuere gravida. Cras vel commodo sapien. In et nunc eget
        augue feugiat mattis ac non tortor. Nulla scelerisque semper orci, nec
        ultricies lacus.
      </p>
      <p>
        Quisque metus risus, volutpat sed dui eget, vulputate accumsan sem.
        Suspendisse at augue dapibus, volutpat tellus non, laoreet dui. Sed
        condimentum, velit ac tristique efficitur, eros diam hendrerit odio, id
        ultricies metus elit sed magna. Proin bibendum purus elit, sed accumsan
        lectus finibus vel.
      </p>
      <p>
        Cras in ex fringilla nisl ornare condimentum. Nunc eget semper mauris.
        Aliquam pulvinar diam non nibh tempus aliquet. In laoreet, sem eget
        imperdiet viverra, est diam rutrum nisl, et sagittis libero urna nec
        felis. Donec ornare justo vel nulla fringilla cursus quis efficitur
        augue.
      </p>
      <p>
        Vestibulum hendrerit odio ex, in ultricies lectus ultrices sed.
        Suspendisse convallis condimentum nisl, et consequat libero gravida a.
        Vivamus sed est iaculis, interdum metus et, ultricies turpis. Aenean a
        leo vel massa tristique imperdiet suscipit sit amet mauris. In rutrum
        quam non mauris fermentum volutpat.
      </p>
      <p>
        Cras pretium lacus sed enim auctor, id blandit libero porttitor.
        Suspendisse potenti. Curabitur nunc mi, lacinia non tempor eget, lacinia
        ut mi. Donec luctus mauris a augue lobortis ultricies. Aliquam erat
        volutpat. Phasellus eget libero id sem aliquet scelerisque eu eu sem.
      </p>
      <p>
        Nam arcu nibh, suscipit non faucibus et, blandit ac libero. Cras ac
        tortor pellentesque, eleifend est ac, dignissim ex. Sed vel erat nec
        ipsum tempus placerat in in mi. Pellentesque pharetra ultrices
        efficitur. Maecenas ultrices libero vel pellentesque fermentum.
      </p>
      <p>
        Suspendisse pretium, augue at mattis consequat, metus lacus semper
        lorem, interdum venenatis massa lacus convallis augue. Donec venenatis
        ante turpis, eget bibendum nibh commodo vitae. Aliquam ut augue
        facilisis, iaculis neque mollis, molestie justo. In arcu augue, semper
        id dapibus quis, rhoncus sed massa.
      </p>
      <p>
        Praesent maximus varius nibh eget vehicula. Curabitur placerat sapien in
        est semper, sit amet accumsan tellus rutrum. Proin quis turpis a tortor
        hendrerit dapibus ut at turpis. Donec a tincidunt nunc. Donec nec ligula
        erat. Vivamus sed nibh nec turpis semper egestas.
      </p>
      <p>
        Proin cursus erat quam, at sollicitudin est vehicula id. Aliquam
        accumsan est in consequat lacinia. Fusce egestas elit sit amet augue
        pharetra, ac cursus magna tempor. Morbi et sem ipsum. Nullam tempor
        porta sollicitudin.
      </p>
      <p>
        Ut nec ligula mollis, fermentum justo et, mattis felis. Aliquam interdum
        risus ut felis vehicula sodales. Donec metus nibh, malesuada id
        ultricies at, ultrices in nisi.
      </p>
      <p>
        Etiam dictum venenatis cursus. Orci varius natoque penatibus et magnis
        dis parturient montes, nascetur ridiculus mus.
      </p>
    </div>
  );
}

 

Step 6- Implement Reading Progress Bar In React

Here, we will implement post and Reading Indicator Components in the App.js global component file:

import React from "react";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import Post from "./components/Post";
import ReadingIndicator from "./components/ReadingIndicator";
function App() {
  return (
    <div className="container">
      <ReadingIndicator />
      <Post />
    </div>
  );
}
export default App;

 

Step 7- Test The App On Browser

As we have reached the end of this tutorial, we will test the React app with the help of the given command:

npm start

 

Conclusion

In this React JS example, we have learned how to create and implement the Reading Progress Bar Indicator in a React JS app.

We have followed the functional component approach and also seen how to use React hooks in the functional component to create the custom reading progress bar without putting much effort.