Paginering er en nyttig teknikk som de fleste datatunge apper kan dra nytte av. React-paginert biblioteket hjelper deg med å forenkle denne prosessen.

Organisering og visning av store mengder data på en brukervennlig måte forbedrer brukeropplevelsen. En teknikk som brukes for å oppnå dette er paginering.

I React kan react-pagete-biblioteket hjelpe deg med å forenkle implementeringen.

Introduksjon til reakt-paginert bibliotek

React-paginert-biblioteket gjør det enkelt å gjengi paginering i React. Den lar deg liste elementer på sider og gir tilpassbare alternativer for ting som sidestørrelse, sideområde og antall sider. Den har også en innebygd hendelsesbehandler slik at du kan skrive kode for å svare på sidendringer.

Nedenfor vil du se hvordan du kan bruke react-pagete for å paginere data hentet fra en API.

Sette opp prosjektet

For å begynne, lag et React-prosjekt ved å bruke kommandoen create-react-app eller Vite. Denne opplæringen bruker Vite. Du finner instruksjonene i dette innlegget om hvordan sette opp React-prosjekter med Vite.

instagram viewer

Når du har opprettet prosjektet, sletter du noe av innholdet i App.jsx, slik at den samsvarer med denne koden:

funksjonApp() {
komme tilbake (
</div>
);
}

eksportmisligholde App;

Dette gir deg en ren fil for å begynne å jobbe med react-pagete.

Sette opp dataene

Du vil hente data fra JSON plassholder API. Denne API-en gir endepunkter for innlegg, kommentarer, album, bilder, gjøremål og brukere. Via innleggets endepunkt vil du hente data fra API ved hjelp av Axios, et HTTP-klientbibliotek.

For å komme i gang, installer Axios ved å bruke denne terminalkommandoen:

npm installer aksioer

Deretter importerer du useEffect-kroken og axios-biblioteket øverst i App.jsx, og hent deretter innleggene fra API-en som vist nedenfor.

import aksioer fra"aksios";
import { useEffect, useState } fra"reagere";

funksjonApp() {
konst [data, setData] = brukState([]);

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

komme tilbake (

</div>
);
}

eksportmisligholde App;

useState-kroken initialiserer en tilstandsvariabel kalt data med en tom matrise. Du bruker setData-funksjonen til å oppdatere tilstanden når API-en returnerer innleggene.

Implementering av paginering med react-pagete

Nå som du har satt opp prosjektet og hentet dataene, er det på tide å legge til paginering ved hjelp av react-pagete. Nedenfor er trinnene du bør følge:

1. Installer reaksjonsside

Kjør følgende kommando for å installere react-pagete bruker npm.

npm installer react-pagete

2. Angi den opprinnelige tilstanden til sidene

Bruk useState-kroken for å holde styr på gjeldende side og totalt antall sider.

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

Du bør også spesifisere det totale antallet elementer en side kan ha.

konst itemsPerPage = 10

I useEffect-kroken legger du til følgende linje for å beregne det totale antallet sider basert på datalengden og antall elementer per side. Lagre den deretter i totalPages-tilstandsvariabelen.

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

UseEffect-kroken din skal nå se slik ut:

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

3. Definer en funksjon for å håndtere sideendringene

Definer først startIndex, endIndex og delsettvariablene for å gjengi delsettet med data basert på gjeldende sidenummer.

konst startIndex = gjeldende side * itemsPerPage;
konst endIndex = startIndex + itemsPerPage;
konst delsett = data.slice (startIndex, endIndex);

Denne koden beregner startIndex- og endIndex-verdiene basert på den aktuellePage-tilstandsverdien og itemsPerPage-verdien. Den bruker deretter disse variablene til å dele opp datamatrisen i et undersett av elementer.

Legg deretter til handlePageChange-funksjonen. Dette er en hendelsesbehandler som kjører når en bruker klikker på Neste-knappen.

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

Til sammen skal søknaden din se slik ut:

import aksioer fra"aksios";
import { useEffect, useState } fra"reagere";

funksjonApp() {
konst [data, setData] = brukState([]);
konst [currentPage, setCurrentPage] = useState(0);
konst [totalPages, setTotalPages] = useState(0);
konst itemsPerPage = 10;

useEffect(() => {
axios.get(' https://jsonplaceholder.typicode.com/posts/').deretter((respons) => {
setData (respons.data);
});

setTotalPages(Matte.ceil (response.data.length / itemsPerPage));
}, []);

konst startIndex = gjeldende side * itemsPerPage;
konst endIndex = startIndex + itemsPerPage;
konst delsett = data.slice (startIndex, endIndex);

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

komme tilbake (

</div>
);
}

eksportmisligholde App;

4. Legg til paginering

Det siste trinnet er å gjengi sidene ved å bruke ReactPaginate-komponenten. Legg til følgende i returerklæringen, og erstatt den tomme div.


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

Dette itererer over elementene i gjeldende delsett og gjengir dem og sender sideCount, onPageChange og forceChange rekvisitter til ReactPaginate.

Tilpasse reaksjons-paginering

react-paginate gir flere rekvisitter som lar deg tilpasse utseendet og følelsen til pagineringskomponenten for å passe til applikasjonens behov.

Her er noen eksempler.

  • Tilpass de neste og forrige knappene ved å bruke rekvisittene previousLabel og nextLabel. Du kan for eksempel bruke chevron-etiketter som vist nedenfor.
     previousLabel={"<}
    nextLabel={">>"}
    />
  • Tilpass pauseetiketten ved å bruke breakLabel-rekvisitten. Pauseetiketten er etiketten som vises når antall sider er høyt, og pagineringskomponenten ikke kan vise alle sidekoblingene. I stedet viser den et brudd, representert ved bruddetiketten, mellom koblingene. Her er et eksempel som bruker ellipse.
     breakLabel={"..."}
    />
  • Tilpass antall sider som skal vises. Hvis du ikke vil vise alle sidene, kan du spesifisere antall sider ved å bruke sideCount prop. Koden nedenfor spesifiserer sideantallet som 5.
     pageCount={5}
    />
  • Tilpasse container- og Active-klassene. Du kan tilpasse klassenavnene for pagineringsbeholderen og den aktive sidelenken ved å bruke rekvisittene containerClassName og activeClassName, henholdsvis. Du kan deretter style pagineringskomponenten ved å bruke disse klassene til den passer til utseendet til appen din.
     containerClassName={"pagineringsbeholder"}
    activeClassName={"aktiv side"}
    />

Dette er ikke en uttømmende liste over tilgjengelige tilpasningsalternativer. Resten finner du i reager-paginer bibliotekdokumenter.

Forbedre brukeropplevelsen ved å bruke paginering

Paginering er en viktig funksjon i enhver applikasjon som viser store datamengder. Uten paginering må brukerne bla gjennom lange lister for å finne informasjonen de trenger, noe som er tidkrevende.

Paginering lar brukere enkelt navigere til de spesifikke dataene de leter etter ved å dele dem opp i mindre, mer håndterbare biter. Dette sparer ikke bare tid, men gjør det også enklere for brukere å behandle informasjonen.