Cara Membuat Reading Bar Indikator di React JS

Di artikel ini, kita akan memulai langkah-langkah dan belajar bagaimana Reading Bar Indikator di React JS atau progress bar saat user atau orang membaca arikel yang kita buat di website kita menggunakan function components dan react hooks.

Selain itu, kita akan belajar cara menginstal dan menggunakan modul style komponen untuk membuat progres bar kemajuan membaca di React.

Membuat Project React Baru

Sebelum memulai dan menghindari error yang tidak dijlaskan pada artikel ini maka pastikan kamu sudah menginstall node dan npm pada sistem pengembangan Kamu.

Untuk Windows

Buka terminal kamu dan ketikan script ini :

npx create-react-app react-blog-app

Selanjutnya, masuk ke folder project yang kita buat.

cd react-blog-app

Menyiapkan Bootstrap

Agar lebih memudahkan ketika membuat layout dan tampilan maka kita akan menggunakan framework css yaitu Bootstrap.

Berikut adalah perintah yang akan dengan cepat menambahkan modul bootstrap di projcet Kamu.

npm i bootstrap

Untuk mengkonekan Bootstrap UI ke projcet react kita maka kita harus mendaftarkan bootstrap di file src/App.js

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

Menginstall Styled Components

menginstall styled components memungkinkan Kamu untuk menulis CSS di React Kamu. Untuk menginstalnya, jalankan perintah ini :

npm install styled-components

Membuat Reading Bar Indikator di React

Reading bar indicator memerlukan modul dan fungsi tertentu untuk diimpor dan ditambahkan dalam file ReadingIndicator .

Kamu harus membuat folder components/ dan buatlah file ReadingIndicator.js.

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;

Membuat Post Function Component

Buatlah file Post.js. post.js ini akan menjadi view untuk halaman postingan yang kita buat, di mana nantinya pada saat pengguna mengscroll halaman dan akan mengetahui berapa banyak teks yang telah dibaca.

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>
  );
}

Menerapkan Reading Progress Bar di React

Kita harus mengimpor komponen post dan ReadingIndicator di  file komponen global App.js.

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;

Melakukan Pengujian

Untuk menguji aplikasi yang tadi sudah kita buat, pertama-tama kita harus memulai / start aplikasi dan membukanya di browser dengan URL yang disarankan.

npm start

Selanjutnya buka di browser.

http://localhost:3000

Selesai.