Pengantar Pagination di React Menggunakan react-paginate
Table of content:
Mengatur dan menampilkan data dalam jumlah besar dengan cara yang mudah digunakan meningkatkan pengalaman pengguna. Salah satu teknik yang digunakan untuk mencapai ini adalah pagination.
Di React, pustaka react-paginate dapat membantu Anda menyederhanakan penerapannya.
Pengenalan ke Library react-paginate
Pustaka react-paginate memudahkan merender pagination di React. Ini memungkinkan Anda untuk mencantumkan item pada halaman dan menyediakan opsi yang dapat disesuaikan untuk hal-hal seperti ukuran halaman, rentang halaman, dan jumlah halaman. Ini juga memiliki event handler bawaan sehingga Anda dapat menulis kode untuk merespons perubahan halaman.
Baca Juga:
Di bawah ini, Anda akan melihat bagaimana Anda dapat menggunakan react-paginate untuk membuat paginasi data yang diambil dari API.
Menyiapkan Proyek
Untuk memulai, buat proyek React menggunakan perintah create-react-app atau Vite. Tutorial ini menggunakan Vite. Anda dapat menemukan petunjuk di postingan ini tentang cara menyiapkan proyek React dengan Vite.
Setelah Anda membuat proyek, hapus beberapa konten di App.jsx, sehingga cocok dengan kode ini:
function App() {
return (
<div> </div>
);
}export default App;
Ini memberi Anda file bersih untuk mulai bekerja dengan react-paginate.
Menyiapkan Data
Anda akan mengambil data dari API placeholder JSON. API ini menyediakan titik akhir untuk posting, komentar, album, foto, todo, dan pengguna. Melalui pos akhir, Anda akan mengambil data dari API menggunakan Axios, sebuah pustaka klien HTTP.
Untuk memulai, instal Axios menggunakan perintah terminal ini:
npm install axios
Selanjutnya, impor pustaka useEffect hook dan axios di bagian atas Aplikasi.jsxlalu ambil postingan dari API seperti yang ditunjukkan di bawah ini.
import axios from "axios";
import { useEffect, useState } from "react";function App() {
const [data, setData] = useState([]);
useEffect(() => {
axios.get('https://jsonplaceholder.typicode.com/posts').then((response) => {
setData(response.data);
});
}, []);
return (
<div> </div>
);
}
export default App;
Hook useState menginisialisasi variabel status yang disebut data dengan array kosong. Anda akan menggunakan fungsi setData untuk memperbarui status saat API mengembalikan postingan.
Sekarang setelah Anda menyiapkan proyek dan mengambil data, saatnya menambahkan paginasi menggunakan halaman-reaksi. Di bawah ini adalah langkah-langkah yang harus Anda ikuti:
1. Instal halaman reaksi
Jalankan perintah berikut untuk menginstal react-paginate menggunakan npm.
npm install react-paginate
2. Atur Status Awal Halaman
Gunakan kait useState untuk melacak halaman saat ini dan jumlah total halaman.
const [currentPage, setCurrentPage] = useState(0);
const [totalPages, setTotalPages] = useState(0);
Anda juga harus menentukan jumlah total item yang dapat dimiliki suatu halaman.
const itemsPerPage = 10
Di hook useEffect, tambahkan baris berikut untuk menghitung jumlah halaman berdasarkan panjang data dan jumlah item per halaman. Kemudian simpan di variabel status totalPages.
setTotalPages(Math.ceil(response.data.length / itemsPerPage));
Kait useEffect Anda sekarang akan terlihat seperti ini:
useEffect(() => {
axios.get('https://jsonplaceholder.typicode.com/posts').then((response) => {
setData(response.data);
setTotalPages(Math.ceil(response.data.length / itemsPerPage))
});
}, []);
3. Tentukan Fungsi untuk Menangani Perubahan Halaman
Pertama, tentukan variabel startIndex, endIndex, dan subset untuk merender subset data berdasarkan nomor halaman saat ini.
const startIndex = currentPage * itemsPerPage;
const endIndex = startIndex + itemsPerPage;
const subset = data.slice(startIndex, endIndex);
Kode ini menghitung nilai startIndex dan endIndex berdasarkan nilai status currentPage dan nilai itemsPerPage. Kemudian menggunakan variabel-variabel ini untuk mengiris array data menjadi subset item.
Kemudian tambahkan fungsi handlePageChange. Ini adalah event handler yang akan dijalankan ketika pengguna mengklik tombol Next.
const handlePageChange = (selectedPage) => {
setCurrentPage(selectedPage.selected);
};
Secara keseluruhan, aplikasi Anda akan terlihat seperti ini:
import axios from "axios";
import { useEffect, useState } from "react";function App() {
const [data, setData] = useState([]);
const [currentPage, setCurrentPage] = useState(0);
const [totalPages, setTotalPages] = useState(0);
const itemsPerPage = 10;
useEffect(() => {
axios.get('https://jsonplaceholder.typicode.com/posts/').then((response) => {
setData(response.data);
});
setTotalPages(Math.ceil(response.data.length / itemsPerPage));
}, []);
const startIndex = currentPage * itemsPerPage;
const endIndex = startIndex + itemsPerPage;
const subset = data.slice(startIndex, endIndex);
const handlePageChange = (selectedPage) => {
setCurrentPage(selectedPage.selected);
};
return (
<div> </div>
);
}
export default App;
Langkah terakhir adalah merender halaman menggunakan komponen ReactPaginate. Tambahkan yang berikut ini ke pernyataan return, ganti yang kosong div.
<div>
{subset.map((item) => (
<div key={item.id}>{item.title}</div>
))}
<ReactPaginate
pageCount={totalPages}
onPageChange={handlePageChange}
forcePage={currentPage}
/>
</div>
Ini mengulangi item dalam subset saat ini dan merendernya dan meneruskan properti pageCount, onPageChange, dan forceChange ke ReactPaginate.
Menyesuaikan halaman reaksi
react-paginate menyediakan beberapa alat peraga yang memungkinkan Anda menyesuaikan tampilan dan nuansa komponen paginasi agar sesuai dengan kebutuhan aplikasi Anda.
Berikut beberapa contohnya.
- Sesuaikan tombol berikutnya dan sebelumnya menggunakan properti previousLabel dan nextLabel. Misalnya, Anda dapat menggunakan label chevron seperti yang ditunjukkan di bawah ini.
<ReactPaginate
previousLabel={"<<"}
nextLabel={">>"}
/> - Kustomisasi label break menggunakan prop breakLabel. Label break adalah label yang ditampilkan ketika jumlah halaman banyak, dan komponen pagination tidak dapat menampilkan semua link halaman. Sebaliknya, ini menampilkan jeda, diwakili oleh label jeda, di antara tautan. Berikut adalah contoh yang menggunakan elipsis.
<ReactPaginate
breakLabel={"..."}
/> - Sesuaikan jumlah halaman yang akan ditampilkan. Jika Anda tidak ingin menampilkan semua halaman, Anda dapat menentukan jumlah halaman menggunakan prop pageCount. Kode di bawah menentukan jumlah halaman sebagai 5.
<ReactPaginate
pageCount={5}
/> - Menyesuaikan Wadah dan Kelas Aktif. Anda dapat menyesuaikan nama kelas untuk wadah pagination dan tautan halaman aktif menggunakan props containerClassName dan activeClassName. Anda kemudian dapat memberi gaya pada komponen pagination menggunakan kelas-kelas ini hingga sesuai dengan tampilan aplikasi Anda.
<ReactPaginate
containerClassName={"pagination-container"}
activeClassName={"active-page"}
/>
Ini bukan daftar lengkap dari opsi penyesuaian yang tersedia. Anda dapat menemukan sisanya di reaksi-paginasi dokumen perpustakaan.
Paginasi adalah fitur penting dalam aplikasi apa pun yang menampilkan data dalam jumlah besar. Tanpa paginasi, pengguna harus menelusuri daftar panjang untuk menemukan informasi yang mereka butuhkan, yang memakan waktu.
Pagination memungkinkan pengguna untuk dengan mudah menavigasi ke data spesifik yang mereka cari dengan memecahnya menjadi bagian yang lebih kecil dan lebih mudah dikelola. Ini tidak hanya menghemat waktu tetapi juga memudahkan pengguna untuk memproses informasi.
Artikel Terkait
