React Paginating component.
There are some popular components which help us to solve pagination problem such as react-paginate, react-pager, โฆ Now there is another one. Itโs called react-paginating with a different approach.
How โreact-paginatingโ is different
โreact-paginatingโ uses Render Props pattern which allows a component to publish any variables, states or functions to the outside as input params of a function which is going to be used for handling logic and rendering the UI.
Here are some differences:
- Input props.
- Controlled props.
- Child callback functions.
- Flexible UI.
Input props
We minimize the number of props which you pass to โreact-paginatingโ for some several reasons:
- Make code more readable.
- Easy to remember the props.
- Not taking too much time to read a document.
- Easy to use
Here is a list of input props:
total
The total records of your data. Your API should include it
I.e:
{
"total": 50,
"data": [
{ "id": 1, "name": "foo" },
{ "id": 2, "name": "bar" }
]
}
limit
How many pages you want to have based on a limit. The formula to calculate totalPages:
const totalPages = Math.ceil(total / limit);
pageCount
How many pages you want to display.
I.e:
pageCount = 5
pageCount = 9
currentPage
The page currently you are visiting. You can pass it from your โquery stringโ or โstateโ. You can visit the example here.
Controlled props
After receiving input props. The component calculates and publishes props which allow controlling UI. Here is a list of public props:
- pages
- currentPage
- previousPage
- nextPage
- totalPages
- hasNextPage
- hasPreviousPage
Here is how it looks like in code
<Pagination total={total} limit={limit} pageCount={pageCount} currentPage={currentPage}>
{({
pages,
currentPage,
hasNextPage,
hasPreviousPage,
previousPage,
nextPage,
totalPages,
getPageItemProps
}) => (
<div>
<a href="/?page=1">first</a>
{hasPreviousPage && <a href={`/?page=${previousPage}`}>{'<'}</a>}
{pages.map(page => {
return (
<a
key={page}
style={currentPage === page ? { backgroundColor: '#fdce09' } : null}
href={`/?page=${page}`}
>
{page}
</a>
);
})}
{hasNextPage && <a href={`/?page=${nextPage}`}>{'>'}</a>}
<a href={`/?page=${totalPages}`}>last</a>
</div>
)}
</Pagination>
Child callback functions
If you use paging with state and has no update on your query string. You can use this callback function pass to your control.
{pages.map(page => {
return (
<button
key={page}
style={currentPage === page ? { backgroundColor: '#fdce09' } : null}
{...getPageItemProps({
pageValue: page,
onPageChange: this.handlePageChange
})}
>
{page}
</button>
);
})}
Flexible UI
By using Function as Child Components pattern. We can completely control UI component. Take a look:
{pages.map(page => {
return (
<a
key={page}
style={currentPage === page ? { backgroundColor: '#fdce09' } : null}
href={`/?page=${page}`}
>
{page}
</a>
);
})}
import CustomAnchor from './component/CustomAnchor';
{pages.map(page => {
return (
<CustomAnchor
key={page}
style={currentPage === page ? { backgroundColor: '#fdce09' } : null}
href={`/?page=${page}`}
>
{page}
</CustomAnchor>
);
})}
In the example above shows that we can create component and then replace . After that, you might put your somewhere on your โstorybookโ or components manager.
Demo
You can check a basic demo: https://codesandbox.io/s/z2rr7z23ol
Conclusion
If you see it is useful for you. Please give react-paginating a star ๐, a watch ๐, and a try ๐.
Or if you see any issues or improvements. PR is welcomed.
The original article is here.
Thanks!
Top comments (2)
Nice! Where was this post two weeks ago. I literally just nixed an implementation for a pagination component in an app I was working on because I didn't have enough time to figure it out.
Hi Dell Ward,
I hope it could help you.
Thanks!