En introduktion till paginering i React med hjälp av react-pagete

Att organisera och visa stora mängder data på ett användarvänligt sätt förbättrar användarupplevelsen. En teknik som används för att uppnå detta är paginering.

I React kan react-pagete-biblioteket hjälpa dig att förenkla implementeringen.

Introduktion till det reagera-paginerade biblioteket

React-pagineringsbiblioteket gör det enkelt att rendera sidnumrering i React. Det låter dig lista objekt på sidor och ger anpassningsbara alternativ för saker som sidstorlek, sidintervall och antal sidor. Den har också en inbyggd händelsehanterare så att du kan skriva kod för att svara på sidändringar.

Nedan ser du hur du kan använda react-pagete för att paginera data som hämtas från ett API.

Konfigurera projektet

Börja med att skapa ett React-projekt med kommandot create-react-app eller Vite. Denna handledning använder Vite. Du hittar instruktionerna i detta inlägg om hur man ställer in React-projekt med Vite.

När du har skapat projektet tar du bort en del av innehållet i App.jsx, så att den matchar denna kod:

fungeraApp() {
lämna tillbaka (
 </div>
 );
}
exporterastandard App;

Detta ger dig en ren fil att börja arbeta med react-pagete.

Ställa in data

Du kommer att hämta data från JSON platshållar-API. Detta API tillhandahåller slutpunkter för inlägg, kommentarer, album, foton, uppgifter och användare. Via postens slutpunkt kommer du hämta data från API: t med Axios, ett HTTP-klientbibliotek.

För att komma igång, installera Axios med detta terminalkommando:

npm installera axios

Importera sedan useEffect-kroken och axios-biblioteket högst upp i App.jsx, hämta sedan inläggen från API: t som visas nedan.

importera axios från"axios";
importera { useEffect, useState } från"reagera";
fungeraApp() {
konst [data, setData] = useState([]);

 useEffect(() => {
 axios.get(' https://jsonplaceholder.typicode.com/posts').sedan((svar) => {
 setData (response.data);
 });
 }, []);
lämna tillbaka (

 </div>
 );
}
exporterastandard App;

useState-kroken initierar en tillståndsvariabel som kallas data med en tom array. Du kommer att använda setData-funktionen för att uppdatera tillståndet när API: et returnerar inläggen.

Implementera paginering med reaktionssida

Nu när du har ställt in projektet och hämtat data, är det dags att lägga till paginering med hjälp av react-pagete. Nedan följer stegen du bör följa:

1. Installera reaktionssida

Kör följande kommando för att installera react-pagete använder npm.

npm installera react-pagete

2. Ställ in det ursprungliga tillståndet för sidorna

Använd useState-kroken för att hålla reda på den aktuella sidan och det totala antalet sidor.

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

Du bör också ange det totala antalet objekt en sida kan ha.

konst itemsPerPage = 10

I useEffect-kroken lägger du till följande rad för att beräkna det totala antalet sidor baserat på datalängden och antalet objekt per sida. Lagra den sedan i tillståndsvariabeln totalPages.

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

Din useEffect-krok ska nu se ut så här:

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

3. Definiera en funktion för att hantera sidändringarna

Definiera först startIndex, endIndex och delmängdsvariablerna för att återge delmängden av data baserat på det aktuella sidnumret.

konst startIndex = aktuell sida * itemsPerPage;
konst endIndex = startIndex + itemsPerPage;
konst subset = data.slice (startIndex, endIndex);

Den här koden beräknar startIndex- och endIndex-värdena baserat på aktuellPage-tillståndsvärdet och itemsPerPage-värdet. Den använder sedan dessa variabler för att dela upp datamatrisen i en delmängd av objekt.

Lägg sedan till handlePageChange-funktionen. Detta är en händelsehanterare som körs när en användare klickar på knappen Nästa.

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

Sammantaget bör din ansökan se ut så här:

importera axios från"axios";
importera { useEffect, useState } från"reagera";
fungeraApp() {
konst [data, setData] = useState([]);
konst [currentPage, setCurrentPage] = useState(0);
konst [totalPages, setTotalPages] = useState(0);
konst itemsPerPage = 10;
 useEffect(() => {
 axios.get(' https://jsonplaceholder.typicode.com/posts/').sedan((svar) => {
 setData (response.data);
 });
 setTotalPages(Matematik.ceil (response.data.length / itemsPerPage));
 }, []);
konst startIndex = aktuell sida * itemsPerPage;
konst endIndex = startIndex + itemsPerPage;
konst subset = data.slice (startIndex, endIndex);
konst handlePageChange = (vald sida) => {
 setCurrentPage (selectedPage.selected);
 };
lämna tillbaka (

 </div>
 );
}
exporterastandard App;

4. Lägg till paginering

Det sista steget är att rendera sidorna med hjälp av ReactPaginate-komponenten. Lägg till följande i retursatsen och ersätt den tomma div.

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

Detta itererar över objekten i den aktuella delmängden och renderar dem och skickar rekvisitan pageCount, onPageChange och forceChange till ReactPaginate.

Anpassa reaktionssida

react-paginate tillhandahåller flera rekvisita som låter dig anpassa utseendet och känslan för sidnumreringskomponenten för att passa din applikations behov.

Här är några exempel.

• Anpassa nästa och föregående knappar med hjälp av föregåendeLabel och nextLabel rekvisita. Du kan till exempel använda chevronetiketter som visas nedan.

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

• Anpassa brytetiketten med breakLabel-propet. Brytetiketten är etiketten som visas när antalet sidor är högt och sidnumreringskomponenten inte kan visa alla sidlänkar. Istället visar den en brytning, representerad av brytetiketten, mellan länkarna. Här är ett exempel som använder ellips.

   breakLabel={"..."}
  />
  

• Anpassa antalet sidor som ska visas. Om du inte vill visa alla sidor kan du ange antalet sidor med hjälp av pageCount prop. Koden nedan anger antalet sidor som 5.

   pageCount={5}
  />
  

• Anpassa behållaren och aktiva klasser. Du kan anpassa klassnamnen för sidnumreringsbehållaren och den aktiva sidlänken med hjälp av rekvisitan containerClassName respektive activeClassName. Du kan sedan utforma sidnumreringskomponenten med dessa klasser tills den passar utseendet på din app.

   containerClassName={"pagineringsbehållare"}
   activeClassName={"aktiv sida"}
  />
  

Detta är inte en uttömmande lista över tillgängliga anpassningsalternativ. Resten hittar du i reagera-paginera biblioteksdokument.

Förbättra användarupplevelsen genom att använda paginering

Paginering är en viktig funktion i alla program som visar stora mängder data. Utan paginering måste användare bläddra igenom långa listor för att hitta den information de behöver, vilket är tidskrävande.

Paginering tillåter användare att enkelt navigera till den specifika data de letar efter genom att dela upp den i mindre, mer hanterbara bitar. Detta sparar inte bara tid utan gör det också lättare för användare att bearbeta informationen.