Introduction à la pagination dans React avec react-paginate

L’organisation et l’affichage de grandes quantités de données de manière conviviale améliorent l’expérience de l’utilisateur. L’une des techniques utilisées 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. Elle vous permet de lister des éléments sur des pages et fournit des options personnalisables pour des éléments tels que la taille de la page, l’étendue de la page et le nombre de pages. Elle 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 utiliser react-paginate pour paginer des données extraites d’une API.

Mise en place du projet

Pour commencer, créez un projet React à l’aide de la commande create-react-app ou de Vite. Ce tutoriel utilise Vite. Vous trouverez dans ce billet les instructions pour mettre en place des projets React avec Vite.

Une fois le projet créé, supprimez une partie du contenu du fichier App.jsx , afin qu’il corresponde à ce code :

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

Mise en place des données

Vous allez récupérer des données à partir de l’API JSON placeholder. Cette API fournit des points de terminaison pour les messages, les commentaires, les albums, les photos, les todos et les utilisateurs. Via le point de terminaison posts, vous récupérerez les données de l’API à l’aide d’Axios, une bibliothèque client HTTP.

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

Ensuite, importez le hook useEffect et la bibliothèque axios en haut du fichier App.jsx puis récupérez les messages de l’API comme indiqué ci-dessous.

Le crochet 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 renverra les messages.

Mise en œuvre de la pagination avec react-paginate

Maintenant que vous avez mis en place 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 react-paginate

Exécutez la commande suivante pour installer react-paginate à l’aide de npm.

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

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

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

Dans le hook 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. Stockez-le ensuite dans la variable d’état totalPages.

Votre hook useEffect devrait maintenant ressembler à ceci :

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

Définissez d’abord les variables startIndex, endIndex et subset pour rendre le sous-ensemble de données basé sur le numéro de page actuel.

Ce code calcule les valeurs startIndex et endIndex en fonction de la valeur de l’état de la page actuelle 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écutera lorsqu’un utilisateur cliquera sur le bouton Next.

Dans l’ensemble, votre application devrait ressembler à ceci :

4. Ajouter la 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 l’instruction vide div.

Ceci itère sur les éléments du sous-ensemble actuel et les rend et transmet les props pageCount, onPageChange, et forceChange à ReactPaginate.

Personnaliser react-paginate

react-paginate fournit plusieurs accessoires qui vous permettent de personnaliser l’aspect et la convivialité du composant de pagination pour répondre aux besoins de votre application.

Voici quelques exemples.

• Personnalisez les boutons next et previous à l’aide des accessoires previousLabel et nextLabel. Par exemple, vous pouvez utiliser des étiquettes en chevron comme indiqué ci-dessous.
• Personnalisez l’étiquette de rupture à l’aide de l’accessoire breakLabel. L’étiquette de rupture est l’étiquette affichée 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 coupure, représentée par l’étiquette de coupure, entre les liens. Voici un exemple qui utilise l’ellipse.
• 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 indique que le nombre de pages est de 5.
• Personnalisation du conteneur et des classes actives. Vous pouvez personnaliser les noms de classe du conteneur de pagination et du lien de page active à l’aide des options 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.

Il ne s’agit pas d’une liste exhaustive des options de personnalisation disponibles. Vous trouverez le reste dans la section react-paginate library docs.

Améliorer 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 faciles à gérer. Cela permet non seulement de gagner du temps, mais aussi de faciliter le traitement de l’information par les utilisateurs.

S’abonner à notre lettre d’information