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-appSelanjutnya, masuk ke folder project yang kita buat.
cd react-blog-appMenyiapkan 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 bootstrapUntuk 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-componentsMembuat 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 startSelanjutnya buka di browser.
http://localhost:3000Selesai.