Introducing React Paginating 🎉🎉🎉

React Paginating component.

gif react-paginating demo

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

with pageCount = 5

pageCount = 9

with 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

sample pagination in use

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.

paging with state

Flexible UI

By using Function as Child Components pattern. We can completely control UI component. Take a look:

custom anchor component

In the example above shows that we can create <CustomAnchor /> component and then replace <a />. After that, you might put your <CustomAnchor /> somewhere on your “storybook” or components manager.

Demo

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.

Thanks!

Front-End, Web developer, Judoka 🥋👨🏻‍💻 💻 ☕️🍺, https://twitter.com/davidnguyen1791