Uvod u paginaciju u Reactu Korištenje react-paginate

Organiziranje i prikazivanje velikih količina podataka na jednostavan način poboljšava korisničko iskustvo. Jedna tehnika koja se koristi za postizanje toga je paginacija.

U Reactu, react-paginate biblioteka može vam pomoći da pojednostavite implementaciju.

Uvod u react-paginate Library

Knjižnica react-paginate olakšava renderiranje paginacije u Reactu. Omogućuje vam popis stavki na stranicama i nudi prilagodljive opcije za stvari kao što su veličina stranice, raspon stranica i broj stranica. Također ima ugrađeni rukovatelj događajima tako da možete pisati kod za odgovor na promjene stranice.

U nastavku ćete vidjeti kako možete koristiti react-paginate za paginiranje podataka dohvaćenih iz API-ja.

Postavljanje projekta

Za početak izradite React projekt koristeći create-react-app naredbu ili Vite. Ovaj vodič koristi Vite. Upute možete pronaći u ovom postu o kako postaviti React projekte s Viteom.

Nakon što izradite projekt, izbrišite dio sadržaja u App.jsx, tako da odgovara ovom kodu:

funkcijaaplikacija() {
povratak (
 </div>
 );
}
izvozzadano aplikacija;

Ovo vam daje čistu datoteku za početak rada s react-paginate.

Postavljanje podataka

Podatke ćete dohvaćati iz JSON API-ja rezerviranog mjesta. Ovaj API pruža krajnje točke za postove, komentare, albume, fotografije, zadatke i korisnike. Putem krajnje točke postova, vi ćete dohvaćanje podataka iz API-ja pomoću Axios-a, knjižnica HTTP klijenta.

Za početak instalirajte Axios pomoću ove naredbe terminala:

npm instalirati axios

Zatim uvezite useEffect hook i axios biblioteku na vrhu App.jsx, zatim dohvatite postove iz API-ja kao što je prikazano u nastavku.

uvoz axios iz"aksios";
uvoz {useEffect, useState} iz"reagirati";
funkcijaaplikacija() {
konst [podaci, setData] = useState([]);

 useEffect(() => {
 axios.get(' https://jsonplaceholder.typicode.com/posts').zatim((odgovor) => {
 setData (response.data);
 });
 }, []);
povratak (

 </div>
 );
}
izvozzadano aplikacija;

UseState hook inicijalizira varijablu stanja pod nazivom data s praznim poljem. Koristit ćete funkciju setData za ažuriranje stanja kada API vrati objave.

Implementacija paginacije s react-paginate

Sada kada ste postavili projekt i dohvatili podatke, vrijeme je da dodate paginaciju pomoću react-paginate. U nastavku su navedeni koraci koje trebate slijediti:

1. Instalirajte react-paginate

Pokrenite sljedeću naredbu za instalaciju react-paginate koristeći npm.

npm instalirajte reakciju-paginaciju

2. Postavite početno stanje stranica

Koristite kuku useState za praćenje trenutne stranice i ukupnog broja stranica.

konst [trenutnaStranica, postaviTrenutnaStranica] = useState(0);
konst [totalPages, setTotalPages] = useState(0);

Također biste trebali navesti ukupan broj stavki koje stranica može imati.

konst stavke po stranici = 10

U kuku useEffect dodajte sljedeći redak za izračun ukupnog broja stranica na temelju duljine podataka i broja stavki po stranici. Zatim ga pohranite u varijablu stanja totalPages.

setTotalPages(matematika.ceil (response.data.length / itemsPerPage));

Vaša useEffect kuka sada bi trebala izgledati ovako:

useEffect(() => {
 axios.get(' https://jsonplaceholder.typicode.com/posts').zatim((odgovor) => {
 setData (response.data);
 setTotalPages(matematika.ceil (response.data.length / itemsPerPage))
 });
 }, []);

3. Definirajte funkciju za rukovanje promjenama stranice

Najprije definirajte varijable startIndex, endIndex i podskup da biste prikazali podskup podataka na temelju trenutnog broja stranice.

konst startIndex = trenutna stranica * stavke po stranici;
konst endIndex = startIndex + itemsPerPage;
konst podskup = data.slice (startIndex, endIndex);

Ovaj kod izračunava vrijednosti startIndex i endIndex na temelju vrijednosti stanja currentPage i vrijednosti itemsPerPage. Zatim koristi te varijable za rezanje niza podataka u podskup stavki.

Zatim dodajte funkciju handlePageChange. Ovo je rukovatelj događajima koji će se pokrenuti kada korisnik klikne gumb Dalje.

konst handlePageChange = (odabranastranica) => {
 setCurrentPage (selectedPage.selected);
};

Sve u svemu, vaša prijava bi trebala izgledati ovako:

uvoz axios iz"aksios";
uvoz {useEffect, useState} iz"reagirati";
funkcijaaplikacija() {
konst [podaci, setData] = useState([]);
konst [trenutnaStranica, postaviTrenutnaStranica] = useState(0);
konst [totalPages, setTotalPages] = useState(0);
konst stavke po stranici = 10;
 useEffect(() => {
 axios.get(' https://jsonplaceholder.typicode.com/posts/').zatim((odgovor) => {
 setData (response.data);
 });
 setTotalPages(matematika.ceil (response.data.length / itemsPerPage));
 }, []);
konst startIndex = trenutna stranica * stavke po stranici;
konst endIndex = startIndex + itemsPerPage;
konst podskup = data.slice (startIndex, endIndex);
konst handlePageChange = (odabranastranica) => {
 setCurrentPage (selectedPage.selected);
 };
povratak (

 </div>
 );
}
izvozzadano aplikacija;

4. Dodaj paginaciju

Posljednji korak je renderiranje stranica pomoću komponente ReactPaginate. Dodajte sljedeće naredbi return, zamjenjujući prazno div.

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

Ovo ponavlja stavke u trenutnom podskupu i renderira ih te prosljeđuje pageCount, onPageChange i forceChange props u ReactPaginate.

Prilagodba react-paginate

react-paginate pruža nekoliko rekvizita koji vam omogućuju da prilagodite izgled i dojam komponente paginacije kako bi odgovarao potrebama vaše aplikacije.

Evo nekoliko primjera.

• Prilagodite sljedeće i prethodne gumbe pomoću prethodnihLabel i nextLabel rekvizita. Na primjer, možete koristiti ševronske oznake kao što je prikazano u nastavku.

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

• Prilagodite oznaku prijeloma koristeći rekvizit breakLabel. Oznaka prekida je oznaka koja se prikazuje kada je broj stranica velik, a komponenta paginacije ne može prikazati sve veze stranica. Umjesto toga, prikazuje prekid, predstavljen oznakom prijeloma, između veza. Evo primjera koji koristi elipsu.

   breakLabel={"..."}
  />
  

• Prilagodite broj stranica za prikaz. Ako ne želite prikazati sve stranice, možete odrediti broj stranica pomoću pageCount prop. Kod u nastavku određuje broj stranica kao 5.

   broj stranica={5}
  />
  

• Prilagodba spremnika i aktivnih klasa. Možete prilagoditi nazive klasa za spremnik paginacije i vezu na aktivnu stranicu koristeći props containerClassName i activeClassName. Zatim možete stilizirati komponentu paginacije pomoću ovih klasa dok ne odgovara izgledu vaše aplikacije.

   containerClassName={"pagination-container"}
   activeClassName={"aktivna-stranica"}
  />
  

Ovo nije iscrpan popis dostupnih opcija prilagodbe. Ostatak možete pronaći u dokumenti knjižnice react-paginate.

Poboljšajte korisničko iskustvo korištenjem paginacije

Paginacija je važna značajka u svakoj aplikaciji koja prikazuje velike količine podataka. Bez označavanja stranica, korisnici se moraju kretati kroz dugačke popise kako bi pronašli informacije koje su im potrebne, što oduzima puno vremena.

Označavanje stranica omogućuje korisnicima jednostavnu navigaciju do određenih podataka koje traže razbijanjem na manje dijelove kojima se lakše upravlja. Ovo ne samo da štedi vrijeme, već i olakšava korisnicima obradu informacija.