Organiser et afficher de grandes quantités de données de manière conviviale améliore l’expérience de l’utilisateur. La pagination est l’une des techniques utilisées pour y parvenir.
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 choses comme 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é qui vous permet d’écrire du code pour répondre aux changements de page.
Ci-dessous, vous verrez comment utiliser react-paginate pour paginer des données récupérées à partir d’une API.
Mise en place du projet
Pour commencer, créez un projet React en utilisant la commande create-react-app ou Vite. Ce tutoriel utilise Vite. Vous pouvez trouver les instructions dans ce post sur la façon de mettre en place des projets React avec Vite.
Une fois le projet créé, supprimez une partie du contenu de App.jsx, pour qu’il corresponde à ce code :
function App() {
return (
<div> </div>
);
}
export default App;
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. Cette API fournit des points de terminaison pour les messages, les commentaires, les albums, les photos, les tâches 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 :
npm install axios
Ensuite, importez le hook useEffect et la librairie axios en haut du fichier App.jsxpuis récupérer les messages de l’API comme indiqué ci-dessous.
import axios from "axios";
import { useEffect, useState } from "react";
function App() {
const [data, setData] = useState([]);
useEffect(() => {
axios.get('https://jsonplaceholder.typicode.com/posts').then((response) => {
setData(response.data);
});
}, []);
return (
<div> </div>
);
}
export default App;
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.
La mise en place 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 en utilisant react-paginate. Voici les étapes à suivre :
1. Installer react-paginate
Exécutez la commande suivante pour installer react-paginate à l’aide de npm.
npm install react-paginate
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.
const [currentPage, setCurrentPage] = useState(0);
const [totalPages, setTotalPages] = useState(0);
Vous devriez également spécifier le nombre total d’éléments qu’une page peut contenir.
const itemsPerPage = 10
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. Elle le stocke ensuite dans la variable d’état totalPages.
setTotalPages(Math.ceil(response.data.length / itemsPerPage));
Votre hook useEffect devrait maintenant ressembler à ceci :
useEffect(() => {
axios.get('https://jsonplaceholder.typicode.com/posts').then((response) => {
setData(response.data);
setTotalPages(Math.ceil(response.data.length / itemsPerPage))
});
}, []);
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 en fonction du numéro de page actuel.
const startIndex = currentPage * itemsPerPage;
const endIndex = startIndex + itemsPerPage;
const subset = data.slice(startIndex, endIndex);
Ce code calcule les valeurs startIndex et endIndex en fonction de la valeur de l’é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 lorsque l’utilisateur clique sur le bouton Next.
const handlePageChange = (selectedPage) => {
setCurrentPage(selectedPage.selected);
};
Dans l’ensemble, votre application devrait ressembler à ceci :
import axios from "axios";
import { useEffect, useState } from "react";
function App() {
const [data, setData] = useState([]);
const [currentPage, setCurrentPage] = useState(0);
const [totalPages, setTotalPages] = useState(0);
const itemsPerPage = 10;
useEffect(() => {
axios.get('https://jsonplaceholder.typicode.com/posts/').then((response) => {
setData(response.data);
});
setTotalPages(Math.ceil(response.data.length / itemsPerPage));
}, []);
const startIndex = currentPage * itemsPerPage;
const endIndex = startIndex + itemsPerPage;
const subset = data.slice(startIndex, endIndex);
const handlePageChange = (selectedPage) => {
setCurrentPage(selectedPage.selected);
};
return (
<div> </div>
);
}
export default App;
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.
<div>
{subset.map((item) => (
<div key={item.id}>{item.title}</div>
))}
<ReactPaginate
pageCount={totalPages}
onPageChange={handlePageChange}
forcePage={currentPage}
/>
</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 l’adapter aux besoins de votre application.
Voici quelques exemples.
- Personnalisez les boutons suivant et précédent en utilisant les attributs previousLabel et nextLabel. Par exemple, vous pouvez utiliser des étiquettes en chevron comme indiqué ci-dessous.
<ReactPaginate
previousLabel={"<<"}
nextLabel={">>"}
/> - 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 la 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.
<ReactPaginate
breakLabel={"..."}
/> - Personnaliser 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.
<ReactPaginate
pageCount={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 paramètres 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.
<ReactPaginate
containerClassName={"pagination-container"}
activeClassName={"active-page"}
/>
Il ne s’agit pas d’une liste exhaustive des options de personnalisation disponibles. Vous pouvez trouver le reste dans la documentation de la bibliothèque react-paginate.
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.