Un'introduzione all'impaginazione in React Utilizzo di react-paginate

L'organizzazione e la visualizzazione di grandi quantità di dati in modo intuitivo migliora l'esperienza dell'utente. Una tecnica utilizzata per raggiungere questo obiettivo è l'impaginazione.

In React, la libreria react-paginate può aiutarti a semplificare l'implementazione.

Introduzione alla libreria react-paginate

La libreria react-paginate semplifica il rendering dell'impaginazione in React. Ti consente di elencare gli elementi sulle pagine e fornisce opzioni personalizzabili per cose come dimensioni della pagina, intervallo di pagine e numero di pagine. Ha anche un gestore di eventi integrato in modo da poter scrivere codice per rispondere ai cambiamenti di pagina.

Di seguito, vedrai come utilizzare react-paginate per impaginare i dati recuperati da un'API.

Impostazione del progetto

Per iniziare, crea un progetto React usando il comando create-react-app o Vite. Questo tutorial usa Vite. Puoi trovare le istruzioni in questo post su

Dopo aver creato il progetto, elimina parte del contenuto in App.jsx, in modo che corrisponda a questo codice:

funzioneApp() {
ritorno (
 </div>
 );
}
esportarepredefinito Applicazione;

Questo ti dà un file pulito per iniziare a lavorare con react-paginate.

Impostazione dei dati

Recupererai i dati dall'API segnaposto JSON. Questa API fornisce endpoint per post, commenti, album, foto, cose da fare e utenti. Tramite l'endpoint dei post, lo farai recuperare i dati dall'API utilizzando Axios, una libreria client HTTP.

Per iniziare, installa Axios utilizzando questo comando da terminale:

npm installa axios

Successivamente, importa l'hook useEffect e la libreria axios nella parte superiore di App.jsx, quindi recupera i post dall'API come mostrato di seguito.

importare assios da"assio";
importare {usaEffetto, usaStato} da"reagire";
funzioneApp() {
cost [data, setData] = useState([]);

 usaEffetto(() => {
 axios.get(' https://jsonplaceholder.typicode.com/posts').Poi((risposta) => {
 setData (response.data);
 });
 }, []);
ritorno (

 </div>
 );
}
esportarepredefinito Applicazione;

L'hook useState inizializza una variabile di stato chiamata data con un array vuoto. Utilizzerai la funzione setData per aggiornare lo stato quando l'API restituisce i post.

Implementazione dell'impaginazione Con react-paginate

Ora che hai impostato il progetto e recuperato i dati, è il momento di aggiungere l'impaginazione usando react-paginate. Di seguito sono riportati i passaggi da seguire:

1. Installa react-paginate

Eseguire il seguente comando per installare react-paginate usando npm.

npm install react-paginate

2. Imposta lo stato iniziale delle pagine

Utilizzare l'hook useState per tenere traccia della pagina corrente e del numero totale di pagine.

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

Dovresti anche specificare il numero totale di elementi che una pagina può avere.

cost elementiPerPagina = 10

Nell'hook useEffect, aggiungi la riga seguente per calcolare il numero totale di pagine in base alla lunghezza dei dati e al numero di elementi per pagina. Quindi memorizzalo nella variabile di stato totalPages.

setTotalPages(Matematica.ceil (response.data.length / itemsPerPage));

Il tuo hook useEffect ora dovrebbe assomigliare a questo:

usaEffetto(() => {
 axios.get(' https://jsonplaceholder.typicode.com/posts').Poi((risposta) => {
 setData (response.data);
 setTotalPages(Matematica.ceil (response.data.length / itemsPerPage))
 });
 }, []);

3. Definire una funzione per gestire le modifiche alla pagina

Definire innanzitutto le variabili startIndex, endIndex e subset per eseguire il rendering del sottoinsieme di dati in base al numero di pagina corrente.

cost startIndex = currentPage * itemsPerPage;
cost endIndex = startIndex + itemsPerPage;
cost sottoinsieme = data.slice (startIndex, endIndex);

Questo codice calcola i valori startIndex e endIndex in base al valore dello stato currentPage e al valore itemsPerPage. Quindi utilizza queste variabili per suddividere l'array di dati in un sottoinsieme di elementi.

Quindi aggiungi la funzione handlePageChange. Questo è un gestore di eventi che verrà eseguito quando un utente fa clic sul pulsante Avanti.

cost handlePageChange = (Pagina selezionata) => {
 setCurrentPage (selectedPage.selected);
};

Complessivamente, la tua applicazione dovrebbe assomigliare a questa:

importare assios da"assio";
importare {usaEffetto, usaStato} da"reagire";
funzioneApp() {
cost [data, setData] = useState([]);
cost [currentPage, setCurrentPage] = useState(0);
cost [totalPages, setTotalPages] = useState(0);
cost elementiPerPagina = 10;
 usaEffetto(() => {
 axios.get(' https://jsonplaceholder.typicode.com/posts/').Poi((risposta) => {
 setData (response.data);
 });
 setTotalPages(Matematica.ceil (response.data.length / itemsPerPage));
 }, []);
cost startIndex = currentPage * itemsPerPage;
cost endIndex = startIndex + itemsPerPage;
cost sottoinsieme = data.slice (startIndex, endIndex);
cost handlePageChange = (Pagina selezionata) => {
 setCurrentPage (selectedPage.selected);
 };
ritorno (

 </div>
 );
}
esportarepredefinito Applicazione;

4. Aggiungi impaginazione

Il passaggio finale consiste nel rendere le pagine utilizzando il componente ReactPaginate. Aggiungi quanto segue all'istruzione return, sostituendo il vuoto div.

 {sottoinsieme.mappa((articolo) => (
{articolo.titolo}</div>
 ))}
 pageCount={totalePagine}
 onPageChange={handlePageChange}
 forcePage={paginacorrente}
 />
</div>

Questo itera sugli elementi nel sottoinsieme corrente e ne esegue il rendering e passa le proprietà pageCount, onPageChange e forceChange a ReactPaginate.

Personalizzazione della reazione-paginazione

react-paginate fornisce diversi oggetti di scena che ti consentono di personalizzare l'aspetto del componente di impaginazione per adattarlo alle esigenze della tua applicazione.

Ecco alcuni esempi.

• Personalizza i pulsanti successivo e precedente utilizzando gli oggetti di scena previousLabel e nextLabel. Ad esempio, puoi utilizzare le etichette chevron come mostrato di seguito.

   etichetta precedente={"<}
   etichetta successiva={">>"}
  />
  

• Personalizza l'etichetta di interruzione utilizzando il prop breakLabel. L'etichetta di interruzione è l'etichetta visualizzata quando il numero di pagine è elevato e il componente di impaginazione non è in grado di visualizzare tutti i collegamenti di pagina. Visualizza invece un'interruzione, rappresentata dall'etichetta di interruzione, tra i collegamenti. Ecco un esempio che utilizza i puntini di sospensione.

   breakLabel={"..."}
  />
  

• Personalizza il numero di pagine da visualizzare. Se non desideri visualizzare tutte le pagine, puoi specificare il numero di pagine utilizzando il prop pageCount. Il codice seguente specifica il numero di pagine pari a 5.

   pageCount={5}
  />
  

• Personalizzazione del contenitore e delle classi attive. È possibile personalizzare i nomi delle classi per il contenitore di impaginazione e il collegamento alla pagina attiva utilizzando rispettivamente le prop containerClassName e activeClassName. Puoi quindi modellare il componente di impaginazione usando queste classi fino a quando non si adatta all'aspetto della tua app.

   containerClassName={"contenitore di impaginazione"}
   activeClassName={"pagina attiva"}
  />
  

Questo non è un elenco esaustivo delle opzioni di personalizzazione disponibili. Il resto lo trovi nel documenti della libreria react-paginate.

Migliora l'esperienza utente utilizzando l'impaginazione

L'impaginazione è una funzionalità importante in qualsiasi applicazione che visualizza grandi quantità di dati. Senza l'impaginazione, gli utenti devono scorrere lunghi elenchi per trovare le informazioni di cui hanno bisogno, il che richiede molto tempo.

L'impaginazione consente agli utenti di navigare facilmente verso i dati specifici che stanno cercando suddividendoli in blocchi più piccoli e più gestibili. Ciò non solo consente di risparmiare tempo, ma facilita anche l'elaborazione delle informazioni da parte degli utenti.