Are you looking to add pagination to your React application? Wondering which pagination library is best for React? How do I use React pagination? What are the best practices for pagination in React? Look no further! This React Pagination Guide and Best React Pagination Libraries will provide you with all the information you need to ensure smooth navigation in your app.
Many developers struggle with the task of adding pagination to their React applications. Pagination can be difficult to implement, as it requires careful consideration of UI design, UX, page load performance, and other factors. Without proper planning, pagination can be difficult to maintain and can cause user frustration.
Implementing pagination is crucial for enhancing user experience in business software, allowing efficient navigation through large datasets, such as weather information. This article provides a comprehensive guide on integrating pagination using React, Node.js, and the react-paginate library, offering practical insights for developers to apply this functionality in their applications.
What Is React Pagination?
Pagination is an important feature of any application where we must handle large amounts of data in smaller chunks. As data grows it becomes essential for a developer to load data from API in chunks and show it in UI. It’s always a good practice to fetch data in a small & precise manner to improve the efficiency & performance of the application. Doing such things also reduces the latency & load time of a server.
In today’s world, most web applications cannot show all the data they need to show to their users at once and there are good reasons to not show all the data at once. So in that case, developers use pagination – separate pages that render a piece of information. Thus react pagination is the pagination made with React.js technology.
Pagination, by facilitating server-client data exchange in manageable chunks, like requesting the first 20 products, enhances the efficiency and responsiveness of business software, ensuring a smoother user experience even with large datasets.
So pagination allows applications to provide a better user experience and allows users to navigate through the data easily. Pagination also helps to make requests to the server in parts, which subsequently has a beneficial effect on the speed of the web application.
Should I develop a component like react pagination myself? Not in our opinion unless you need very deep customization. Instead, you can better do more important things.
So let’s go to our tutorial.
Prerequisites
For you to complete this guide, you need to be familiar with the following technologies:
- Basic JavaScript;
- You should be familiar with all the basic concepts of reaction;
- You should know what npm and webpack are;
- You must have node.js installed;
- You should know how to make simple requests to the server.
React Pagination Guide
Step 1 – Setting up a project
We’ll start by installing the boilerplate of the react node.js application. For this, we will take a ready-made application – https://github.com/crsandeep/simple-react-full-stack. This is a simple full-stack React application with a Node.js and Express backend. Client-side code is written in React and the backend API is written using Express. We need the backend to make an API request and send data to the client.
For a quick start please type the following commands:
# Clone the repository
git clone https://github.com/crsandeep/simple-react-full-stack
# Go inside the directory
cd simple-react-full-stack
# Install dependencies
yarn (or npm install)
# Start development server
yarn dev (or npm run dev)
# Build for production
yarn build (or npm run build)
# Start production server
yarn start (or npm start)If everything goes well you will see something like this on your computer screen.
Now that you’ve started the application, development can begin. Notice that a browser tab has been opened for you with live reloading functionality to keep in sync with the application as you develop.
Also, before starting development, go to the project folder and familiarize yourself with the structure. The most important part for us is the /src folder, which contains 2 client folders – this is our react application and the server folder, where the file for working with the index.js backend is located.
Step 2 – Server setup
To display data in our application, we will use the OpenWeatherMap API – https://openweathermap.org/current. We will use the section in the API documentation where we need to make a query to display data for several cities – Call current weather data for several cities. API returns the data from cities within the defined rectangle specified by the geographic coordinates. The request will look like this:
api.openweathermap.org/data/2.5/box/city?bbox={bbox}&appid={API key}Next, we’ll start working with the index.js file in the server folder. Before starting work, we advise you to check if all libraries are installed – for example, express. We will also need the following libraries to work with the server:
- Cors – it allows you to enable CORS with several options;
- Axios – for API requests;
- Body-parser – allows you to parse incoming request bodies in a middleware before your handlers.
To install these libraries, enter the following commands in the terminal one by one:
$ npm install cors
$ npm install axios
$ npm install body-parserIn index.js file, we initialize these libraries:
const express = require('express');
const cors = require('cors');
const bodyParser = require('body-parser');
const axios = require('axios');Let’s declare an app variable to work with express:
const app = express();Next, we directly request the OpenWeatherMap API by entering the following code:
app.use(cors());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(express.static('dist'));
app.get('/list', async (req, res) => {
try{
let result = await axios.get("http://api.openweathermap.org/data/2.5/box/city?bbox=12,32,15,37,10&appid=476787c5ccaf8b0949ff8b5bc02cdecc");
res.json(result.data);
} catch(e) {
console.log(e);
}
});We use express.static(‘dist’) to serve static files from the ‘dist’ directory.
And then we directly configure routing using the get method. We also use try-catch to not allow the server to crash if any error arises.
After we have made requests to the API using the app. listen, we start the server and specify the port that we will listen to. As a result, our file will look like this.
const express = require('express');
const cors = require('cors');
const bodyParser = require('body-parser');
const axios = require('axios');
const app = express();
app.use(cors());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(express.static('dist'));
app.get('/list', async (req, res) => {
try{
let result = await axios.get("http://api.openweathermap.org/data/2.5/box/city?bbox=12,32,15,37,10&appid=476787c5ccaf8b0949ff8b5bc02cdecc");
res.json(result.data);
} catch(e) {
console.log(e);
}
});
app.listen(process.env.PORT || 8080, () => console.log(`Listening on port ${process.env.PORT || 8080}!`));Congratulations you just made a server to display data for our pagination application! Let’s work with the client part.
Step 3 – Develop the client part of the application
In this part, we will start building the front-end part of the application. We will develop a table where we will display our data. To do this, go to the client folder and open the app.js file.
Note, that we will use a ready-made library called react-paginate to create the pagination component – https://github.com/AdeleD/react-paginate. Please install this library for yourself by typing the command:
npm install react-paginate --saveAlso, note that we will be doing pagination without lazy loading.
In our file, we import the following libraries:
import axios from 'axios';
import ReactPaginate from 'react-paginate';And we will also start developing our table and pagination by initializing the initial state of our component, for this, we add the following code:
class App extends Component {
state = {
list: [],
perPage: 3,
page: 0,
pages: 0,
};
};List serves as an array that will store our data that will come from the server.perPage is the number of rows that we will show in our table.Page is the start page from which our table will begin.Pages are how many pages are in the table initially.
The next step is to request our created server. To do this, we will add the following code to our file.
class App extends Component {
state = {
list: [],
perPage: 3,
page: 0,
pages: 0,
};
componentDidMount() {
this.makeHttpRequest();
}
makeHttpRequest = async() => {
let res = await axios.get('http://localhost:8080/list').catch(err => console.log(err));
const {perPage} = this.state;
const {list} = res.data;
this.setState({
list,
pages: Math.floor(list.length / perPage)
});
};
};Please note that we determine how many pages will eventually be shown already at the request level by assigning the state pages by dividing the length of the list array by the number of items per page, recall that we have it equal to 3.
We also make API requests in componentDidMount.
Next, let’s move on to the render method and finally do our table and pagination.
render() {
const {page, perPage, pages, list} = this.state;
let items = list.slice(page * perPage, (page + 1) * perPage);
let weathers = items.map(item => {
const { id, name, main } = item;
const { temp, humidity, pressure } = main;
const { speed } = item.wind;
return (
<tr key={id}>
<td>{name}</td>
<td>{temp}</td>
<td>{humidity}</td>
<td>{pressure}</td>
<td>{speed}</td>
</tr>
)
}) || '';If we take a closer look at this code, we will see the following.
We created the items variable and used the slice method to split our array and only show 3 rows on each page.
We also created the weather variable and used the map method to pull out the data and the list array we needed, namely:
- City name;
- Temperature;
- Humidity;
- Atmosphere pressure;
- Wind speed.
Next, let’s make our table, which will finally show our data, for this we add the following block of code:
return (
<>
<table className='Table'>
<thead>
<tr>
<th>Name of the city</th>
<th>Temperature</th>
<th>Humidity</th>
<th>Pressure</th>
<th>Wind Speed</th>
</tr>
</thead>
<tbody>
{weathers}
</tbody>
</table>
</>
);At this stage, if you are familiar with React, I hope there is no need to explain much, except that <tbody> we put our variable weather, which will show our data. As a result, you should have the following table.
Let’s go to the main thing and add the Pagination component. Add it after the <table> tag.
<ReactPaginate
previousLabel={'prev'}
nextLabel={'next'}
pageCount={pages}
onPageChange={this.handlePageClick}
containerClassName={'pagination'}
activeClassName={'active'}
/>Here we saw that we need to add the handlePageClick method. It will look like this:
handlePageClick = (event) => {
let page = event.selected;
this.setState({page})
}That’s it – we have finished creating the pagination for our table. Let’s take a look at the whole App.js file to get the big picture.
import React, { Component } from 'react';
import './app.css';
import axios from 'axios';
import ReactPaginate from 'react-paginate';
class App extends Component {
state = {
list: [],
perPage: 3,
page: 0,
pages: 0,
};
componentDidMount() {
this.makeHttpRequest();
}
makeHttpRequest = async() => {
let res = await axios.get('http://localhost:8080/list').catch(err => console.log(err));
const {perPage} = this.state;
const {list} = res.data;
this.setState({
list,
pages: Math.floor(list.length / perPage)
});
};
handlePageClick = (event) => {
let page = event.selected;
this.setState({page})
}
render() {
const {page, perPage, pages, list} = this.state;
let items = list.slice(page * perPage, (page + 1) * perPage);
let weathers = items.map(item => {
const { id, name, main } = item;
const { temp, humidity, pressure } = main;
const { speed } = item.wind;
return (
<tr key={id}>
<td>{name}</td>
<td>{temp}</td>
<td>{humidity}</td>
<td>{pressure}</td>
<td>{speed}</td>
</tr>
)
}) || '';
return (
<>
<table className='Table'>
<thead>
<tr>
<th>Name of the city</th>
<th>Temperature</th>
<th>Humidity</th>
<th>Pressure</th>
<th>Wind Speed</th>
</tr>
</thead>
<tbody>
{weathers}
</tbody>
</table>
<ReactPaginate
previousLabel={'prev'}
nextLabel={'next'}
pageCount={pages}
onPageChange={this.handlePageClick}
containerClassName={'pagination'}
activeClassName={'active'}
/>
</>
);
}
}
export default App;If you did everything correctly, then the following result should come out (here we have already styled the table right away, we will show how to do this in the next step).
Step 4 – custom styles
In this step, we will add styles to our project. This step can be done a little earlier, depending on what kind you prefer to work with. We’ll be changing the styles fairly straightforwardly. To do this, find the App.css file in the /src folder of your project and add the following styles to make the table look like in the screenshot:
.Table {
border-spacing: 20px;
border: 1px solid #6c7ac9;
border-radius: 5px;
margin-top: 50px;
}
body {
margin: 0;
font-family: sans-serif;
color: #6c7ac9;
}
#root {
display: flex;
align-items: center;
flex-direction: column;
}
.pagination {
display: flex;
justify-content: space-between;
list-style: none;
margin-top: 20px;
padding: 0;
}
.pagination a {
cursor: default;
padding: 10px;
border-radius: 5px;
border: 1px solid #6c7ac9;
color: #6c7ac9;
margin-left: 10px;
}
.pagination li:not(.disabled) a:hover {
background-color: bisque;
cursor: pointer;
}
.pagination li a {
font-weight: bold;
}
.pagination li.active a {
color: #fff;
background: #6c7ac9;
}
.pagination li.disabled a {
pointer-events: none;
color: rgb(198, 197, 202);
border: 1px solid rgb(198, 197, 202);
}Congratulations, you’ve now completed building your own React project with pagination. At the end of the article, we will post a link to GitHub, where you can download the project and install it for yourself.
Best React Pagination Example
Material-Ui Pagination component
Material UI is a component library for React teeming with powerful components that you should be using in your projects. If you’re just looking to create a good-looking app, Material UI can provide you with solid pre-styled components that will get the job done.
To enable pagination using Material-UI, you need to import Pagination from '@material-ui/lab/Pagination' and use <Pagination /> component.
The library provides several types of design of pagination:
- Basic pagination;
- Outlined pagination;
- Rounded pagination;
You can also set pagination size and range. Additionally, you can add buttons and use Table pagination.
React paginate
React paginate is one of the most popular pagination components to use while developing tables or other pages where you need pagination.
The library is easy to install and use. It also has good options to deeply customize it. There are more than 25 options on how you can customize your pagination component using the React paginate library.
React-bootstrap pagination component
React-bootstrap is a very useful library that replaces jQuery code in Bootstrap. Each component is built with React. React-bootstrap gives all the components that you have in the original Bootstrap (alerts, buttons, tables), so you can use them without pain.
React-bootstrap gives you a full set of options for pagination setup – it has already built <Pagination /> components that you can customize for your needs. It also has a basic API for setting up the size of pagination and styles.
Pagination React Component
React Component pagination is a part of the ant. design foundation library. It gives you a simple pagination component for your existing react application. The library can be installed in a couple of commands and it has a wide variety of API options. It also has several styles of pagination:
- Basic;
- Jumper;
- Sized;
- Locate;
- Fewer pages and others.
Semantic-UI react pagination component
Semantic UI React is the official React integration for Semantic UI. The library has the following great features:
- jQuery Free;
- Declarative API;
- Augmentation;
- Shorthand Props;
- Sub Components;
- Auto Controlled State.
The pagination component has a good simple design and integrates to the existing app very smoothly. It also has several options on how to develop pagination:
- A pagination component can be disabled;
- Pagination can be a controlled component;
- Pagination has configurable options;
- Pagination is a wrapper for the Menu component, you can use Menu props with Pagination.
- Pagination has support for a shorthand API for its items.
Rsuite Js react pagination component
React Suite is a library of React components, designed for the middle platform and back-end products. Committed to creating intimate interactive designs while providing developers with a friendly development experience. The library is pretty popular and has almost 6k stars on GitHub.
As for the pagination component, it is very simple yet good for use in the basic react applications with the following options:
- You can change the size of the pagination component;
- You can disable it;
- You can also use some of the advanced features like adding boundary links, showing the last and first pages, and adding arrows;
- There are also dozens of props available.
React table pagination component
React Table is one of the most popular table libraries in React. It has almost 15,000 stars on GitHub. The react-table library is very lightweight and offers all the basic features necessary for any simple table. Now, after version 7 was released, it also supports Hooks.
The pagination components in this library are a part of the options available when you are developing a react table. Thus, you can use this react pagination component only with the react table library.
Conclusion
In this tutorial, you have made a react pagination component using a ready-made library. You also learned how to make a request to the server and set up a basic full-stack react application.
We have also attached the source code of our application so that you can use it in your further development.
Additionally, you can check how we developed React pagination components in our ready-made React Templates.
Comments