DEV Community

Cover image for Introducing React Paginating ๐ŸŽ‰๐ŸŽ‰๐ŸŽ‰
Dzung Nguyen
Dzung Nguyen

Posted on • Updated on

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" }
    ]
}

Enter fullscreen mode Exit fullscreen mode

limit

How many pages you want to have based on a limit. The formula to calculate totalPages:

const totalPages = Math.ceil(total / limit);
Enter fullscreen mode Exit fullscreen mode

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

<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>
Enter fullscreen mode Exit fullscreen mode

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>
  );
})}
Enter fullscreen mode Exit fullscreen mode

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>
  );
})}
Enter fullscreen mode Exit fullscreen mode
import CustomAnchor from './component/CustomAnchor';

{pages.map(page => {
  return (
    <CustomAnchor
      key={page}
      style={currentPage === page ? { backgroundColor: '#fdce09' } : null}
      href={`/?page=${page}`}
    >
      {page}
    </CustomAnchor>
  );
})}
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
dellward profile image
Dell Ward

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.

Collapse
 
dzungnguyen179 profile image
Dzung Nguyen

Hi Dell Ward,

I hope it could help you.

Thanks!