O introducere în paginarea în React folosind react-paginate

Organizarea și afișarea unor cantități mari de date într-un mod ușor de utilizat, îmbunătățește experiența utilizatorului. O tehnică folosită pentru a realiza acest lucru este paginarea.

În React, biblioteca react-paginate vă poate ajuta să simplificați implementarea.

Introducere în biblioteca react-paginate

Biblioteca react-paginate facilitează redarea paginației în React. Vă permite să enumerați articole pe pagini și oferă opțiuni personalizabile pentru lucruri precum dimensiunea paginii, intervalul de pagini și numărul de pagini. Are, de asemenea, un handler de evenimente încorporat, astfel încât să puteți scrie cod pentru a răspunde la modificările paginii.

Mai jos, veți vedea cum puteți utiliza react-paginate pentru a pagina datele preluate dintr-un API.

Configurarea Proiectului

Pentru a începe, creați un proiect React folosind comanda create-react-app sau Vite. Acest tutorial folosește Vite. Puteți găsi instrucțiunile în această postare despre

După ce ați creat proiectul, ștergeți o parte din conținutul din App.jsx, astfel încât să se potrivească cu acest cod:

funcţieApp() {
întoarcere (
 </div>
 );
}
exportMod implicit Aplicație;

Acest lucru vă oferă un fișier curat pentru a începe să lucrați cu react-paginate.

Configurarea datelor

Veți prelua date din API-ul substituent JSON. Acest API oferă puncte finale pentru postări, comentarii, albume, fotografii, toate și utilizatori. Prin punctul final al postărilor, veți preluați date din API folosind Axios, o bibliotecă client HTTP.

Pentru a începe, instalați Axios folosind această comandă de terminal:

npm instalează axios

Apoi, importați biblioteca useEffect hook și axios din partea de sus a App.jsx, apoi preluați postările din API așa cum se arată mai jos.

import axios din"axios";
import { useEffect, useState } din"reacţiona";
funcţieApp() {
const [date, setData] = useState([]);

 useEffect(() => {
 axios.get(' https://jsonplaceholder.typicode.com/posts').apoi((raspuns) => {
 setData (response.data);
 });
 }, []);
întoarcere (

 </div>
 );
}
exportMod implicit Aplicație;

Cârligul useState inițializează o variabilă de stare numită date cu o matrice goală. Veți folosi funcția setData pentru a actualiza starea când API-ul returnează postările.

Implementarea paginației cu react-paginate

Acum că ați configurat proiectul și ați preluat datele, este timpul să adăugați paginarea folosind react-paginate. Mai jos sunt pașii pe care ar trebui să îi urmați:

1. Instalați react-paginate

Rulați următoarea comandă pentru a instala react-paginate folosind npm.

npm install react-paginate

2. Setați starea inițială a paginilor

Utilizați cârligul useState pentru a urmări pagina curentă și numărul total de pagini.

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

De asemenea, ar trebui să specificați numărul total de articole pe care le poate avea o pagină.

const itemPerPage = 10

În cârligul useEffect, adăugați următoarea linie pentru a calcula numărul total de pagini pe baza lungimii datelor și a numărului de articole pe pagină. Apoi stocați-l în variabila de stare totalPages.

setTotalPages(Matematică.plafon (lungimea.date.răspuns / itemiPerPage));

Cârligul tău useEffect ar trebui să arate acum astfel:

useEffect(() => {
 axios.get(' https://jsonplaceholder.typicode.com/posts').apoi((raspuns) => {
 setData (response.data);
 setTotalPages(Matematică.plafon (lungimea.date.răspuns / itemiPerPage))
 });
 }, []);

3. Definiți o funcție pentru a gestiona modificările paginii

Mai întâi definiți variabilele startIndex, endIndex și subsetul pentru a reda subsetul de date pe baza numărului paginii curente.

const startIndex = currentPage * itemsPerPage;
const endIndex = startIndex + itemsPerPage;
const subset = data.slice (startIndex, endIndex);

Acest cod calculează valorile startIndex și endIndex pe baza valorii de stare currentPage și a valorii itemsPerPage. Apoi utilizează aceste variabile pentru a împărți matricea de date într-un subset de elemente.

Apoi adăugați funcția handlePageChange. Acesta este un handler de evenimente care va rula atunci când un utilizator face clic pe butonul Următorul.

const handlePageChange = (Pagina selectată) => {
 setCurrentPage (selectedPage.selected);
};

În total, aplicația dvs. ar trebui să arate astfel:

import axios din"axios";
import { useEffect, useState } din"reacţiona";
funcţieApp() {
const [date, setData] = useState([]);
const [currentPage, setCurrentPage] = useState(0);
const [totalPages, setTotalPages] = useState(0);
const itemPerPage = 10;
 useEffect(() => {
 axios.get(' https://jsonplaceholder.typicode.com/posts/').apoi((raspuns) => {
 setData (response.data);
 });
 setTotalPages(Matematică.plafon (lungimea.date.răspuns / itemiPerPage));
 }, []);
const startIndex = currentPage * itemsPerPage;
const endIndex = startIndex + itemsPerPage;
const subset = data.slice (startIndex, endIndex);
const handlePageChange = (Pagina selectată) => {
 setCurrentPage (selectedPage.selected);
 };
întoarcere (

 </div>
 );
}
exportMod implicit Aplicație;

4. Adăugați paginație

Pasul final este redarea paginilor folosind componenta ReactPaginate. Adăugați următoarele la declarația de returnare, înlocuind cea goală div.

 {subset.map((articol) => (
{item.title}</div>
 ))}
 pageCount={totalPages}
 onPageChange={handlePageChange}
 forcePage={currentPage}
 />
</div>

Aceasta iterează peste elementele din subsetul curent și le redă și transmite elementele de recuzită pageCount, onPageChange și forceChange către ReactPaginate.

Personalizarea react-paginate

react-paginate oferă mai multe elemente de recuzită care vă permit să personalizați aspectul și senzația componentei de paginare pentru a se potrivi nevoilor aplicației dvs.

Aici sunt cateva exemple.

• Personalizați butoanele următor și precedent folosind elementele de recuzită previousLabel și nextLabel. De exemplu, puteți utiliza etichete chevron așa cum se arată mai jos.

   previousLabel={"<}
   nextLabel={">>"}
  />
  

• Personalizați eticheta de pauză utilizând prop breakLabel. Eticheta de pauză este eticheta afișată atunci când numărul de pagini este mare, iar componenta de paginare nu este capabilă să afișeze toate linkurile de pagină. În schimb, afișează o întrerupere, reprezentată de eticheta de întrerupere, între legături. Iată un exemplu care utilizează punctele de suspensie.

   breakLabel={"..."}
  />
  

• Personalizați numărul de pagini de afișat. Dacă nu doriți să afișați toate paginile, puteți specifica numărul de pagini folosind propul pageCount. Codul de mai jos specifică numărul de pagini ca fiind 5.

   pageCount={5}
  />
  

• Personalizarea containerului și a claselor active. Puteți personaliza numele claselor pentru containerul de paginare și linkul de pagină activă folosind elementele de recuzită containerClassName și, respectiv, activeClassName. Puteți apoi să stilați componenta de paginare folosind aceste clase până când se potrivește cu aspectul aplicației dvs.

   containerClassName={"paginare-container"}
   activeClassName={"pagina-activa"}
  />
  

Aceasta nu este o listă exhaustivă a opțiunilor de personalizare disponibile. Restul îl găsiți în documente bibliotecă react-paginate.

Îmbunătățiți experiența utilizatorului utilizând paginarea

Paginarea este o caracteristică importantă în orice aplicație care afișează cantități mari de date. Fără paginare, utilizatorii trebuie să parcurgă liste lungi pentru a găsi informațiile de care au nevoie, ceea ce necesită mult timp.

Paginarea permite utilizatorilor să navigheze cu ușurință la datele specifice pe care le caută, împărțindu-le în bucăți mai mici și mai ușor de gestionat. Acest lucru nu numai că economisește timp, ci facilitează și procesarea informațiilor de către utilizatori.