The Reactjs pagination library will be used directly for the pagination functionality of any list of items. The props required here are an array of list items to render and an onChange callback function, which informs the parent component about the page change.
But pagination is important by filtering and displaying only relevant data, for example, Google search engine.
Therefore, Reactjs pagination becomes crucial when users search for certain information and do not consume random information.
Some built-in libraries are used to handle pagination in web development, in the case of React. You directly use many resources to handle pagination in the application.
Some of the NPM and other pagination libraries available are:
Instead of rewriting your own, it’s ideal to use these existing libraries, as there’s no need to reinvent the wheel; instead, you can focus on other things.
But at the same time, it is very important to know what is going on behind the scenes to build and customize the app to your needs without compromising any requirements.
There is also a possibility that different logic is used for different reactjs pagination packages. To implement react pagination in your app, read this excellent react-jw-pagination article.
Here we talk only about react-paginate (the second one):
A ReactJS component to render the pagination.
By installing the component and writing just a bit of CSS, you can get this: Note: You must write your CSS to get this UI. This package does not provide any CSS.
Try it on Code Pen.
You can read the code in demo/js/demo.js to understand make reactive pagination work in a list of objects.
Finally, the CodePen demo introduces getting the sample code (GitHub API) and two synchronized widgets of pagination.
|pageCount||Number||The total number of pages which is required.|
|PageRank displayed||Number||The range of pages which is displayed.|
|marginPagesDisplayed||Number||The number of pages has displayed in the margins.|
|previousLabel||Node||It is mainly used for Label for the previous button.|
|nextLabel||Node||It is used for Label for the next button.|
|breakLabel||Node||Mainly used for Label for ellipses.|
|breakClassName||String||The name of the class in the li tag of the ellipsis element.|
|breakLinkClassName||String||The name of the class is in the tag of the ellipsis element.|
|onPageChange||Function||It is used to call when a page is changed and exposes the page object as an argument.|
|onClick||Function||A callback for click on the component. Exposes information about the clicked (for example, is next for the next control), the expected next page, nextSelectedPage, and others. It returns prevents page changes or numbers from overriding the page again.|
|onPageActive||Function||It is used to call if any active page is clicked. It exposes the active page object as the argument.|
|initialPage||Number||The initial page is selected at uncontrolled mode. Don’t use it forcePage.|
|forcePage||Number||To override the selected page with the main prop. If you want to control the page from app state then use it.|
|disableInitialCallback||boolean||It disable the onPageChange callback with the initial page. Default: false|
|containerClassName||String||It is the class name of paging container.|
|className||String||It is same as the containerClassName. It is use with styled-components and other CSS-in-JS.|
|pageClassName||String||The class name in the li tag of every page element.|
|pageLinkClassName||String||The name of the class is the tag of each element on the page.|
|pageLabelBuilder||Function||It is a function used to set the text links on the page. Default to (page) = page|
|activeClassName||String||The name of the class for the active page.|
|activeLinkClassName||String||The name of the class in the tag activates a.|
|previousClassName||String||The name of the class is in the li tag of the previous button.|
|nextClassName||String||The class name is in the li tag of the following button.|
|previousLinkClassName||String||The name of the class is in a tag on the previous button.|
|nextLinkClassName||String||The name of the class is on the tag of the next button.|
|disabledClassName||String||It is used as the disabled previous and next buttons.|
|disabledLinkClassName||String||The class name in the tag is used for disabled previous or next buttons.|
|hrefBuilder||Function||The method is used to generate the attribute value in the tag of the element on the page.|
|hrefAllControls||Bool||hrefBuilder adds hrefs as active controls by default. Set its property to true so that the hrefs will generate on all the controls.|
|extraAriaContext||String||Additional context to add the aria-label at the HTML attribute.|
|ariaLabelBuilder||Function||It is called to generate the value of the aria-label attribute.|
|eventListener||String||The event is used to listen to before changing the selected page. The default value is onClick here.|
|renderOnZeroPageCount||Function||A rendering function is called when pageCount is zero. Let the Next buttons shown by default. It does not display anything when a null value is supplied.|
|prevRel||String||The actual property in the tag is the control of the previous page. Default value prev. set is the null to disable.|
|nextRel||String||The actual property for the next page control. Next default value.|
|prevPageRel||String||The actual property in the tag is before the selected page. Default value prev. Set to null to disable.|
|selectedPageRel||String||The actual property in the selected page tag. Canonical default value. Set is null to disable.|
|nextPageRel||String||The actual property in the tag is right after the selected page-the next default value. Set is null to disable.|
Clone the repository and access it easily to run the demo:
Install the dependencies:
Prepare the demo:
Run the server:
Open the browser and go to http://localhost:3000/.
Here we implement a pagination element in React app by using the react-paginate.
Add and install react-paginate on a dependency in the app.
currentPage is index of the page selected by user, you may want to set it to 0, ie. the first page.
Data contains all data elements. It is empty and we fill it after we get the data.
Here, we create a useEffect hook by an empty dependency array that functions as the DidMount component’s lifecycle method and is responsible for getting the data and updating the data state.
Calculation of data to represent the current page.
Let’s first define some constants:
The PER_PAGE constant contains the number of items to display on each page, and an offset is the number of items that is already been displayed on previous pages.
If the current page is two (or the third page indexing starts by 0), then the offset becomes 20. It means that the first 20 elements have been rendered, and we will start rendering the next elements after 20 (the first page yielded the first ten items, 2nd the page yielded the next 10). The third page will render items 20 to 20 + BY_PAGE, 30.
This offset is used to set the current page elements, ie the current page data, which is mapped to an array of images using the split data.
let’s render the component:
You can refer to this to see the different types of props passed to ReactPaginate.
When a new page is clicked here, a handlePageClick event handler function sets the current page.
Styling the pagination element:
It would be best to classify props like nextLinkClassName, previousLinkClassName, disabledClassName, and activeClassName to add classes of the pagination links for custom styling of the page.