Una introducción a la paginación en React usando react-paginate

Organizar y mostrar grandes cantidades de datos de una manera fácil de usar mejora la experiencia del usuario. Una técnica utilizada para lograr esto es la paginación.

En React, la biblioteca react-paginate puede ayudarlo a simplificar la implementación.

Introducción a la biblioteca de paginación reactiva

La biblioteca react-paginate facilita la representación de la paginación en React. Le permite enumerar elementos en las páginas y proporciona opciones personalizables para cosas como el tamaño de la página, el rango de páginas y la cantidad de páginas. También tiene un controlador de eventos incorporado para que pueda escribir código para responder a los cambios de página.

A continuación, verá cómo puede usar react-paginate para paginar los datos recuperados de una API.

Configuración del proyecto

Para comenzar, cree un proyecto React usando el comando create-react-app o Vite. Este tutorial utiliza Vite. Puedes encontrar las instrucciones en este post sobre

Una vez que haya creado el proyecto, elimine parte del contenido en App.jsx, para que coincida con este código:

funciónaplicación() {
devolver (
 </div>
 );
}
exportarpor defecto aplicación;

Esto le brinda un archivo limpio para comenzar a trabajar con react-paginate.

Configuración de los datos

Obtendrá datos de la API de marcador de posición JSON. Esta API proporciona puntos finales para publicaciones, comentarios, álbumes, fotos, todos y usuarios. A través del punto final de las publicaciones, podrá obtener datos de la API usando Axios, una biblioteca de cliente HTTP.

Para comenzar, instale Axios usando este comando de terminal:

npm instalar axios

A continuación, importe la biblioteca useEffect hook y axios en la parte superior de Aplicación.jsx, luego obtenga las publicaciones de la API como se muestra a continuación.

importar axios de"axíos";
importar { usarEfecto, usarEstado } de"reaccionar";
funciónaplicación() {
constante [datos, establecerDatos] = usarEstado([]);

 usarEfecto(() => {
 axios.get(' https://jsonplaceholder.typicode.com/posts').entonces((respuesta) => {
 setData (respuesta.datos);
 });
 }, []);
devolver (

 </div>
 );
}
exportarpor defecto aplicación;

El gancho useState inicializa una variable de estado llamada datos con una matriz vacía. Utilizará la función setData para actualizar el estado cuando la API devuelva las publicaciones.

Implementando paginación con react-paginate

Ahora que configuró el proyecto y obtuvo los datos, es hora de agregar paginación usando react-paginate. A continuación se detallan los pasos que debe seguir:

1. Instalar reaccionar-paginar

Ejecute el siguiente comando para instalar react-paginate usando npm.

npm instalar reaccionar-paginar

2. Establecer el estado inicial de las páginas

Utilice el enlace useState para realizar un seguimiento de la página actual y el número total de páginas.

constante [páginaActual, establecerPáginaActual] = usarEstado(0);
constante [totalPages, setTotalPages] = useState(0);

También debe especificar el número total de elementos que puede tener una página.

constante artículos por página = 10

En el enlace useEffect, agregue la siguiente línea para calcular el número total de páginas en función de la longitud de los datos y el número de elementos por página. Luego guárdelo en la variable de estado totalPages.

setTotalPages(Matemáticas.ceil (response.data.length / itemsPerPage));

Su enlace useEffect ahora debería verse así:

usarEfecto(() => {
 axios.get(' https://jsonplaceholder.typicode.com/posts').entonces((respuesta) => {
 setData (respuesta.datos);
 setTotalPages(Matemáticas.ceil (respuesta.datos.longitud / elementos por página))
 });
 }, []);

3. Definir una función para manejar los cambios de página

Primero defina las variables startIndex, endIndex y subset para representar el subconjunto de datos en función del número de página actual.

constante startIndex = página actual * elementos por página;
constante endIndex = startIndex + itemsPerPage;
constante subconjunto = data.slice (startIndex, endIndex);

Este código calcula los valores startIndex y endIndex en función del valor del estado de la página actual y el valor de los elementos por página. Luego usa estas variables para dividir la matriz de datos en un subconjunto de elementos.

Luego agregue la función handlePageChange. Este es un controlador de eventos que se ejecutará cuando un usuario haga clic en el botón Siguiente.

constante manejarCambioPágina = (página seleccionada) => {
 setCurrentPage (página seleccionada.seleccionada);
};

En total, su aplicación debería verse así:

importar axios de"axíos";
importar { usarEfecto, usarEstado } de"reaccionar";
funciónaplicación() {
constante [datos, establecerDatos] = usarEstado([]);
constante [páginaActual, establecerPáginaActual] = usarEstado(0);
constante [totalPages, setTotalPages] = useState(0);
constante artículos por página = 10;
 usarEfecto(() => {
 axios.get(' https://jsonplaceholder.typicode.com/posts/').entonces((respuesta) => {
 setData (respuesta.datos);
 });
 setTotalPages(Matemáticas.ceil (response.data.length / itemsPerPage));
 }, []);
constante startIndex = página actual * elementos por página;
constante endIndex = startIndex + itemsPerPage;
constante subconjunto = data.slice (startIndex, endIndex);
constante manejarCambioPágina = (página seleccionada) => {
 setCurrentPage (página seleccionada.seleccionada);
 };
devolver (

 </div>
 );
}
exportarpor defecto aplicación;

4. Agregar paginación

El paso final es renderizar las páginas usando el componente ReactPaginate. Agregue lo siguiente a la declaración de devolución, reemplazando el vacío división.

 {subconjunto.mapa((artículo) => (
{elemento.título}</div>
 ))}
 pageCount={total de páginas}
 onPageChange={handlePageChange}
 forcePage={páginaactual}
 />
</div>

Esto itera sobre los elementos en el subconjunto actual y los representa y pasa los apoyos pageCount, onPageChange y forceChange a ReactPaginate.

Personalizando reaccionar-paginar

react-paginate proporciona varios accesorios que le permiten personalizar la apariencia del componente de paginación para que se ajuste a las necesidades de su aplicación.

Aquí hay unos ejemplos.

• Personalice los botones siguiente y anterior con las propiedades previousLabel y nextLabel. Por ejemplo, puede usar etiquetas de cheurón como se muestra a continuación.

   etiqueta anterior={"<}
   siguienteEtiqueta={">>"}
  />
  

• Personalice la etiqueta de descanso con la propiedad breakLabel. La etiqueta de interrupción es la etiqueta que se muestra cuando el número de páginas es alto y el componente de paginación no puede mostrar todos los enlaces de la página. En su lugar, muestra una ruptura, representada por la etiqueta de ruptura, entre los enlaces. Aquí hay un ejemplo que usa puntos suspensivos.

   romperEtiqueta={"..."}
  />
  

• Personaliza el número de páginas a mostrar. Si no desea mostrar todas las páginas, puede especificar el número de páginas utilizando la propiedad pageCount. El siguiente código especifica el recuento de páginas como 5.

   pageCount={5}
  />
  

• Personalizando el Contenedor y las Clases Activas. Puede personalizar los nombres de clase para el contenedor de paginación y el enlace de la página activa utilizando los accesorios containerClassName y activeClassName, respectivamente. Luego puede diseñar el componente de paginación usando estas clases hasta que se ajuste al aspecto de su aplicación.

   containerClassName={"contenedor de paginación"}
   NombreClaseActiva={"página activa"}
  />
  

Esta no es una lista exhaustiva de las opciones de personalización disponibles. Puedes encontrar el resto en el documentos de la biblioteca react-paginate.

Mejore la experiencia del usuario mediante el uso de la paginación

La paginación es una función importante en cualquier aplicación que muestre grandes cantidades de datos. Sin paginación, los usuarios tienen que desplazarse por largas listas para encontrar la información que necesitan, lo que lleva mucho tiempo.

La paginación permite a los usuarios navegar fácilmente a los datos específicos que buscan dividiéndolos en partes más pequeñas y manejables. Esto no solo ahorra tiempo, sino que también facilita a los usuarios el procesamiento de la información.