Hello Shubham !

I have found and used your pagination component in my own React app and it works just fine. But there is still a little problem and I need your help.

Imagine the use case below : At the top of the page, I have the "Pagination" component. Then, my page size is 30, so I have 30 "cards" of my data. And then, at the bottom of the page, a new time the "Pagination" component.

The problem is : When I use "setCurrentPage" from the prop "onPageChange" in the second pagination component, the new page is opened at the bottom, that is to say at the same level in the page than the previous page.

How could I do to make it open at the top of the page or at any other place with an anchor, for example ? It's not as simple as basic HTML !!

Thanks in advance for the answer you can bring.

Jérôme Fromantin, French front-end junior developer.

This version is almost ready to be published as a NPM package, all we need is a unique name for it and some content changes in package.json and README.md files.

TODO

Things to do in package.json:

• change name field
• add description field
• change urls in repository, bugs and homepage fields

Things to do in README.md:

• replace package-name with an actual name

Usage

1. Clone this repo
2. Install dependencies with npm install
3. Build src/script.ts file with npm run build
4. Run npm link
5. Create a new React project and navigate to its directory
6. Run npm link react-pagination
7. To unlink, simply run npm unlink react-pagination

Issue — Accessbility

I did a lot of research before building my own pagination for AgnosticUI and appreciated your article and this example among the many other resources available on this interesting topic. I realize it takes a lot of time to write this sort of article and it's deeply appreciated!

I do have an issue to report — the fact that this implementation doesn't support either: 1) tab into and across the paging links, or 2) tab into and then arrow across the links (I believe both are acceptable a11y) is problem since it's likely a "first-stop" to many electing to give custom pagination a go. We have a problem in our industry where keyboard navigation and accessibility concerns are tackled as an after thought already; so if the tutorial and this repo could include keyboard navigation it would help so much in pointing FE devs in the right direction in my opinion.

Examples

Here's an example implementation that allows you to tab into the paging controls, and then arrow key through them https://garden.zendesk.com/components/pagination

Here's another example from my library that uses buttons (and so I got tab into and through for free):

• usePagination hook
• pagination component
• Storybook pagination story

This version of the pagination component is a work-in-progress so I unfortunately cannot point you to a live example but you can see the focus ring is updated on tab per the screen grab below:

Again, thank you so much for your help in writing the tutorial and keeping this repository open and available to the community! It would be great if you could write a part II on how to make this pagination component a11y-compliant and fully inclusive (either via use of buttons or keyup management).