Content
For example, a client could ask the server for a list of the first 20 products. Now, we’ll navigate to the parent component, which is the Passengers component in our case, responsible for fetching passenger data and setting the pagination props.
Total page count is greater than the page pills but only the left DOTS are visible. Now that we have our project running, we’ll dive straight into our Pagination component. If you are familiar with setting up a React project, you can skip this section. Rendering all the data at once on the screen can cause your webpage to slow down considerably because of the large number of DOM elements present in the webpage. You can specify how many digits to display either side of current page with the siblingRange prop, and adjacent to the start and end page number with the boundaryRange prop. The Pagination component enables the user to select a specific page from a range of pages.
How to Use the Custom Pagination Component
Of course, in reality, we would be dealing with a backend which also allows us to send requests to get chunks of data . You can learn how to write server-side code in our NodeJS course. We will create a simple React application which will show the list of posts to the user. The minimum page limit is the current minimum limit plus the page number limit. For the minimum page limit, we subtract the page number limit from the current minimum limit. Keep in mind that the current page is the previous page minus 1. Before jumping into the implementation, let me introduce two React Hooks that we’ll use in this article.
The total number of items returned by the hook should remain constant. This will avoid resizing our pagination component if the length of the range array changes while the user is interacting with the component. Applications that display large amounts of data in the form of either a list or table can implement pagination to divide the data into a sequence of pages. Instead of fetching huge amounts of data from a server API, pagination loads data on demand, decreasing load time and improving the overall UI. And because you can represent these custom pagination strategies with stateless functions, you can reuse a single function for every list field that uses the same strategy.
Create a pagination component
Although we used React in this tutorial, the logic we implemented for the pagination can be used in any front-end framework and it will work exactly as it will work with React. This Pagination component is reusable and can be extended to change the style of the pagination. Now that we have implemented the functions, the only thing that left in our Pagination component is the JSX code that will be returned by this component. The above code shows the structure of the Pagination component that we will use to implement the pagination in our application. We will also allow the user to click on any page number to go to that page. There are different types of pagination that can be seen in many web apps.
In order to set up our React Project, we will use the create-react-app command line package. You can install the package globally using npm install -g create-react-app or yarn add global create-react-app. Use disabled for links that appear un-clickable and .active to indicate the current page. Once we have the start and end indexes, we slice the data array and return the sliced array. This sliced array will be used to show the posts on the current page. We will show 5 page numbers at a time and also show “next” and “previous” buttons to go to next or previous page.
