Uma introdução à paginação em React usando react-paginate

Organizar e exibir grandes quantidades de dados de maneira amigável melhora a experiência do usuário. Uma técnica usada para conseguir isso é a paginação.

No React, a biblioteca react-paginate pode ajudá-lo a simplificar a implementação.

Introdução à biblioteca react-paginate

A biblioteca react-paginate facilita a renderização da paginação no React. Ele permite listar itens nas páginas e fornece opções personalizáveis ​​para itens como tamanho da página, intervalo de páginas e número de páginas. Ele também possui um manipulador de eventos integrado para que você possa escrever código para responder a alterações de página.

Abaixo, você verá como pode usar react-paginate para paginar dados recuperados de uma API.

Configurando o Projeto

Para começar, crie um projeto React usando o comando create-react-app ou Vite. Este tutorial usa Vite. Você pode encontrar as instruções neste post sobre

Depois de criar o projeto, exclua parte do conteúdo em App.jsx, para que corresponda a este código:

funçãoAplicativo() {
retornar (
 </div>
 );
}
exportarpadrão Aplicativo;

Isso fornece um arquivo limpo para começar a trabalhar com o react-paginate.

Configurando os Dados

Você estará buscando dados da API de espaço reservado JSON. Essa API fornece endpoints para postagens, comentários, álbuns, fotos, todos e usuários. Por meio do terminal de postagens, você buscar dados da API usando Axios, uma biblioteca cliente HTTP.

Para começar, instale o Axios usando este comando de terminal:

npm instalar axios

Em seguida, importe o gancho useEffect e a biblioteca axios na parte superior de App.jsx, em seguida, busque as postagens da API conforme mostrado abaixo.

importar axios de"axios";
importar { useEffect, useState } de"reagir";
funçãoAplicativo() {
const [dados, setData] = useState([]);

 useEffect(() => {
 axios.get(' https://jsonplaceholder.typicode.com/posts').então((resposta) => {
 setData (resposta.data);
 });
 }, []);
retornar (

 </div>
 );
}
exportarpadrão Aplicativo;

O hook useState inicializa uma variável de estado chamada data com um array vazio. Você usará a função setData para atualizar o estado quando a API retornar as postagens.

Implementando paginação com react-paginate

Agora que você configurou o projeto e buscou os dados, é hora de adicionar paginação usando react-paginate. Abaixo estão os passos que você deve seguir:

1. Instalar react-paginate

Execute o seguinte comando para instalar o react-paginate usando npm.

npm install react-paginate

2. Definir o estado inicial das páginas

Use o gancho useState para controlar a página atual e o número total de páginas.

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

Você também deve especificar o número total de itens que uma página pode ter.

const itensPorPágina = 10

No gancho useEffect, inclua a linha a seguir para calcular o número total de páginas com base no comprimento dos dados e no número de itens por página. Em seguida, armazene-o na variável de estado totalPages.

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

Seu gancho useEffect agora deve ficar assim:

useEffect(() => {
 axios.get(' https://jsonplaceholder.typicode.com/posts').então((resposta) => {
 setData (resposta.data);
 setTotalPages(Matemática.ceil (response.data.length / itemsPerPage))
 });
 }, []);

3. Definir uma função para lidar com as alterações de página

Primeiro, defina as variáveis ​​startIndex, endIndex e subconjunto para renderizar o subconjunto de dados com base no número da página atual.

const startIndex = currentPage * itemsPerPage;
const endIndex = startIndex + itensPorPágina;
const subconjunto = data.slice (startIndex, endIndex);

Esse código calcula os valores startIndex e endIndex com base no valor do estado currentPage e no valor itemsPerPage. Em seguida, ele usa essas variáveis ​​para dividir a matriz de dados em um subconjunto de itens.

Em seguida, adicione a função handlePageChange. Este é um manipulador de eventos que será executado quando um usuário clicar no botão Avançar.

const handlePageChange = (página selecionada) => {
 setCurrentPage (selectedPage.selected);
};

Ao todo, sua aplicação deve ficar assim:

importar axios de"axios";
importar { useEffect, useState } de"reagir";
funçãoAplicativo() {
const [dados, setData] = useState([]);
const [currentPage, setCurrentPage] = useState(0);
const [totalPages, setTotalPages] = useState(0);
const itensPorPágina = 10;
 useEffect(() => {
 axios.get(' https://jsonplaceholder.typicode.com/posts/').então((resposta) => {
 setData (resposta.data);
 });
 setTotalPages(Matemática.ceil (response.data.length / itemsPerPage));
 }, []);
const startIndex = currentPage * itemsPerPage;
const endIndex = startIndex + itensPorPágina;
const subconjunto = data.slice (startIndex, endIndex);
const handlePageChange = (página selecionada) => {
 setCurrentPage (selectedPage.selected);
 };
retornar (

 </div>
 );
}
exportarpadrão Aplicativo;

4. Adicionar Paginação

A etapa final é renderizar as páginas usando o componente ReactPaginate. Adicione o seguinte à instrução return, substituindo o vazio div.

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

Isso itera sobre os itens no subconjunto atual e os renderiza e passa as props pageCount, onPageChange e forceChange para ReactPaginate.

Personalizando react-paginate

react-paginate fornece vários adereços que permitem personalizar a aparência do componente de paginação para atender às necessidades do seu aplicativo.

Aqui estão alguns exemplos.

• Personalize os botões seguinte e anterior usando os props previousLabel e nextLabel. Por exemplo, você pode usar rótulos chevron conforme mostrado abaixo.

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

• Personalize o rótulo de quebra usando o prop breakLabel. O rótulo de quebra é o rótulo exibido quando o número de páginas é alto e o componente de paginação não consegue exibir todos os links da página. Em vez disso, ele exibe uma quebra, representada pelo rótulo de quebra, entre os links. Aqui está um exemplo que usa reticências.

   breakLabel={"..."}
  />
  

• Personalize o número de páginas a serem exibidas. Se você não deseja exibir todas as páginas, pode especificar o número de páginas usando o prop pageCount. O código abaixo especifica a contagem de páginas como 5.

   pageCount={5}
  />
  

• Personalizando o Container e Classes Ativas. Você pode personalizar os nomes de classe para o contêiner de paginação e o link da página ativa usando os props containerClassName e activeClassName, respectivamente. Você pode estilizar o componente de paginação usando essas classes até que ele se ajuste à aparência do seu aplicativo.

   containerClassName={"contêiner de paginação"}
   activeClassName={"página ativa"}
  />
  

Esta não é uma lista exaustiva das opções de personalização disponíveis. Você pode encontrar o resto no documentos da biblioteca react-paginate.

Melhore a experiência do usuário usando a paginação

A paginação é um recurso importante em qualquer aplicativo que exibe grandes quantidades de dados. Sem paginação, os usuários precisam percorrer longas listas para encontrar as informações de que precisam, o que consome muito tempo.

A paginação permite que os usuários naveguem facilmente até os dados específicos que estão procurando, dividindo-os em partes menores e mais gerenciáveis. Isso não apenas economiza tempo, mas também facilita o processamento das informações pelos usuários.