Une introduction à la pagination dans React Utilisation de react-paginate

L'organisation et l'affichage de grandes quantités de données de manière conviviale améliorent l'expérience utilisateur. Une technique utilisée pour y parvenir est la pagination.

Dans React, la bibliothèque react-paginate peut vous aider à simplifier la mise en œuvre.

Introduction à la bibliothèque react-paginate

La bibliothèque react-paginate facilite le rendu de la pagination dans React. Il vous permet de répertorier les éléments sur les pages et fournit des options personnalisables pour des éléments tels que la taille de la page, la plage de pages et le nombre de pages. Il dispose également d'un gestionnaire d'événements intégré afin que vous puissiez écrire du code pour répondre aux changements de page.

Ci-dessous, vous verrez comment vous pouvez utiliser react-paginate pour paginer les données récupérées à partir d'une API.

Configuration du projet

Pour commencer, créez un projet React à l'aide de la commande create-react-app ou Vite. Ce tutoriel utilise Vite. Vous pouvez trouver les instructions dans cet article sur comment mettre en place des projets React avec Vite.

Une fois que vous avez créé le projet, supprimez une partie du contenu dans App.jsx, pour qu'il corresponde à ce code:

fonctionApplication() {
retour (
 </div>
 );
}
exporterdéfaut application ;

Cela vous donne un fichier propre pour commencer à travailler avec react-paginate.

Configuration des données

Vous récupérerez des données à partir de l'API d'espace réservé JSON. Cette API fournit des points de terminaison pour les publications, les commentaires, les albums, les photos, les tâches et les utilisateurs. Via le point de terminaison des messages, vous récupérer les données de l'API à l'aide d'Axios, une bibliothèque cliente HTTP.

Pour commencer, installez Axios à l'aide de cette commande de terminal :

npm installer axios

Ensuite, importez le crochet useEffect et la bibliothèque axios en haut de App.jsx, puis récupérez les publications à partir de l'API, comme indiqué ci-dessous.

importer axios depuis"axios";
importer { useEffect, useState } depuis"réagir";
fonctionApplication() {
constante [données, setData] = useState([]);

 useEffet(() => {
 axios.get(' https://jsonplaceholder.typicode.com/posts').alors((réponse) => {
 setData (response.data);
 });
 }, []);
retour (

 </div>
 );
}
exporterdéfaut application ;

Le hook useState initialise une variable d'état appelée data avec un tableau vide. Vous utiliserez la fonction setData pour mettre à jour l'état lorsque l'API renvoie les publications.

Implémentation de la pagination avec react-paginate

Maintenant que vous avez configuré le projet et récupéré les données, il est temps d'ajouter la pagination à l'aide de react-paginate. Vous trouverez ci-dessous les étapes à suivre :

1. Installer réagir-paginer

Exécutez la commande suivante pour installer react-paginate en utilisant npm.

npm installer réagir-paginer

2. Définir l'état initial des pages

Utilisez le crochet useState pour garder une trace de la page actuelle et du nombre total de pages.

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

Vous devez également spécifier le nombre total d'éléments qu'une page peut contenir.

constante élémentsParPage = 10

Dans le crochet useEffect, ajoutez la ligne suivante pour calculer le nombre total de pages en fonction de la longueur des données et du nombre d'éléments par page. Ensuite, stockez-le dans la variable d'état totalPages.

setTotalPages(Mathématiques.ceil (response.data.length / itemsPerPage));

Votre crochet useEffect devrait maintenant ressembler à ceci :

useEffet(() => {
 axios.get(' https://jsonplaceholder.typicode.com/posts').alors((réponse) => {
 setData (response.data);
 setTotalPages(Mathématiques.ceil (response.data.length / élémentsParPage))
 });
 }, []);

3. Définir une fonction pour gérer les changements de page

Définissez d'abord les variables startIndex, endIndex et subset pour afficher le sous-ensemble de données en fonction du numéro de page actuel.

constante startIndex = pageactuelle * élémentsParPage ;
constante endIndex = startIndex + élémentsParPage ;
constante sous-ensemble = data.slice (startIndex, endIndex);

Ce code calcule les valeurs startIndex et endIndex en fonction de la valeur d'état currentPage et de la valeur itemsPerPage. Il utilise ensuite ces variables pour découper le tableau de données en un sous-ensemble d'éléments.

Ajoutez ensuite la fonction handlePageChange. Il s'agit d'un gestionnaire d'événements qui s'exécute lorsqu'un utilisateur clique sur le bouton Suivant.

constante handlePageChange = (page sélectionnée) => {
 setCurrentPage (selectedPage.selected);
};

Au total, votre application devrait ressembler à ceci :

importer axios depuis"axios";
importer { useEffect, useState } depuis"réagir";
fonctionApplication() {
constante [données, setData] = useState([]);
constante [currentPage, setCurrentPage] = useState(0);
constante [totalPages, setTotalPages] = useState(0);
constante élémentsParPage = 10;
 useEffet(() => {
 axios.get(' https://jsonplaceholder.typicode.com/posts/').alors((réponse) => {
 setData (response.data);
 });
 setTotalPages(Mathématiques.ceil (response.data.length / itemsPerPage));
 }, []);
constante startIndex = pageactuelle * élémentsParPage ;
constante endIndex = startIndex + élémentsParPage ;
constante sous-ensemble = data.slice (startIndex, endIndex);
constante handlePageChange = (page sélectionnée) => {
 setCurrentPage (selectedPage.selected);
 };
retour (

 </div>
 );
}
exporterdéfaut application ;

4. Ajouter une pagination

La dernière étape consiste à rendre les pages à l'aide du composant ReactPaginate. Ajoutez ce qui suit à l'instruction de retour, en remplaçant le vide div.

 {sous-ensemble.map((article) => (
{item.title}</div>
 ))}
 pageCount={totalPages}
 onPageChange={handlePageChange}
 forcePage={currentPage}
 />
</div>

Cela parcourt les éléments du sous-ensemble actuel, les restitue et transmet les accessoires pageCount, onPageChange et forceChange à ReactPaginate.

Personnalisation de la pagination réactive

react-paginate fournit plusieurs accessoires qui vous permettent de personnaliser l'apparence du composant de pagination pour répondre aux besoins de votre application.

Voici quelques exemples.

• Personnalisez les boutons suivant et précédent à l'aide des props previousLabel et nextLabel. Par exemple, vous pouvez utiliser des étiquettes en chevron comme indiqué ci-dessous.

   étiquetteprécédente={"<}
   nextLabel={">>"}
  />
  

• Personnalisez l'étiquette de rupture à l'aide de la propriété breakLabel. Le libellé de rupture est le libellé affiché lorsque le nombre de pages est élevé et que le composant de pagination n'est pas en mesure d'afficher tous les liens de page. Au lieu de cela, il affiche une rupture, représentée par l'étiquette de rupture, entre les liens. Voici un exemple qui utilise des points de suspension.

   breakLabel={"..."}
  />
  

• Personnalisez le nombre de pages à afficher. Si vous ne souhaitez pas afficher toutes les pages, vous pouvez spécifier le nombre de pages à l'aide de la propriété pageCount. Le code ci-dessous spécifie le nombre de pages à 5.

   pageCount={5}
  />
  

• Personnalisation du conteneur et des classes actives. Vous pouvez personnaliser les noms de classe pour le conteneur de pagination et le lien de la page active à l'aide des props containerClassName et activeClassName, respectivement. Vous pouvez ensuite styliser le composant de pagination à l'aide de ces classes jusqu'à ce qu'il corresponde à l'apparence de votre application.

   containerClassName={"conteneur de pagination"}
   nomClasseactive={"page-active"}
  />
  

Il ne s'agit pas d'une liste exhaustive des options de personnalisation disponibles. Vous pouvez trouver le reste dans documentation de la bibliothèque de réaction-pagination.

Améliorez l'expérience utilisateur en utilisant la pagination

La pagination est une fonctionnalité importante dans toute application qui affiche de grandes quantités de données. Sans pagination, les utilisateurs doivent faire défiler de longues listes pour trouver les informations dont ils ont besoin, ce qui prend du temps.

La pagination permet aux utilisateurs de naviguer facilement vers les données spécifiques qu'ils recherchent en les divisant en morceaux plus petits et plus gérables. Cela permet non seulement de gagner du temps, mais aussi de faciliter le traitement des informations par les utilisateurs.