Pengantar Pagination di React Menggunakan react-paginate

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.

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 posting ini tentang

Setelah Anda membuat proyek, hapus beberapa konten di App.jsx, sehingga cocok dengan kode ini:

fungsiAplikasi() {
kembali (
 </div>
 );
}
eksporbawaan Aplikasi;

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, pustaka klien HTTP.

Untuk memulai, instal Axios menggunakan perintah terminal ini:

npm instal axios

Selanjutnya, impor pustaka useEffect hook dan axios di bagian atas Aplikasi.jsx, lalu ambil postingan dari API seperti yang ditunjukkan di bawah ini.

impor axios dari"aksi";
impor { useEffect, useState } dari"reaksi";
fungsiAplikasi() {
const [data, setData] = useState([]);

 gunakanEfek(() => {
 axios.get(' https://jsonplaceholder.typicode.com/posts').Kemudian((tanggapan) => {
 setData (respons.data);
 });
 }, []);
kembali (

 </div>
 );
}
eksporbawaan Aplikasi;

Hook useState menginisialisasi variabel status yang disebut data dengan array kosong. Anda akan menggunakan fungsi setData untuk memperbarui status saat API mengembalikan postingan.

Menerapkan Pagination Dengan react-paginate

Sekarang setelah Anda menyiapkan proyek dan mengambil data, saatnya menambahkan pagination menggunakan react-paginate. 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. Tetapkan Status Awal Halaman

Gunakan kait useState untuk melacak halaman saat ini dan jumlah total halaman.

const [HalamanArus, setCurrentPage] = useState(0);
const [totalPages, setTotalPages] = useState(0);

Anda juga harus menentukan jumlah total item yang dapat dimiliki suatu halaman.

const itemPerHalaman = 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.

setTotalHalaman(Matematika.ceil (respons.data.length / itemPerPage));

Kait useEffect Anda sekarang akan terlihat seperti ini:

gunakanEfek(() => {
 axios.get(' https://jsonplaceholder.typicode.com/posts').Kemudian((tanggapan) => {
 setData (respons.data);
 setTotalHalaman(Matematika.ceil (response.data.panjang / itemPerPage))
 });
 }, []);

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 = (Halaman yang dipilih) => {
 setCurrentPage (Halamanterpilih.dipilih);
};

Secara keseluruhan, aplikasi Anda akan terlihat seperti ini:

impor axios dari"aksi";
impor { useEffect, useState } dari"reaksi";
fungsiAplikasi() {
const [data, setData] = useState([]);
const [HalamanArus, setCurrentPage] = useState(0);
const [totalPages, setTotalPages] = useState(0);
const itemPerHalaman = 10;
 gunakanEfek(() => {
 axios.get(' https://jsonplaceholder.typicode.com/posts/').Kemudian((tanggapan) => {
 setData (respons.data);
 });
 setTotalHalaman(Matematika.ceil (respons.data.length / itemPerPage));
 }, []);
const startIndex = currentPage * itemsPerPage;
const endIndex = startIndex + itemsPerPage;
const subset = data.slice (startIndex, endIndex);
const handlePageChange = (Halaman yang dipilih) => {
 setCurrentPage (Halamanterpilih.dipilih);
 };
kembali (

 </div>
 );
}
eksporbawaan Aplikasi;

4. Tambahkan Paginasi

Langkah terakhir adalah merender halaman menggunakan komponen ReactPaginate. Tambahkan yang berikut ini ke pernyataan return, ganti yang kosong div.

 {subset.peta((barang) => (
{item.judul}</div>
 ))}
 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.

   label sebelumnya={"<}
   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.

   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.

   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.

   containerClassName={"wadah pagination"}
   NamaKelas aktif={"halaman aktif"}
  />
  

Ini bukan daftar lengkap dari opsi penyesuaian yang tersedia. Anda dapat menemukan sisanya di reaksi-paginasi dokumen pustaka.

Tingkatkan Pengalaman Pengguna dengan Menggunakan Paginasi

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.