Introducing React Paginating 🎉🎉🎉

Dzung Nguyen
Feb 7, 2018 · 3 min read

Today, I am happy to announce a 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.

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.

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

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

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!

Chợ Tốt

Learn more about how Chợ Tốt designs, builds, operates our product and organization.

Dzung Nguyen

Written by

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

Chợ Tốt

Learn more about how Chợ Tốt designs, builds, operates our product and organization.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade