This project supports two kinds of APIs
A custom hook that returns you the pagination data which can then be used to create a customized component
A React component that renders the Pagination component and supports previous and next arrow buttons
Created with StackBlitz ⚡️
Home Page: https://stackblitz.com/edit/react-1zaeqk
This project supports two kinds of APIs
A custom hook that returns you the pagination data which can then be used to create a customized component
A React component that renders the Pagination component and supports previous and next arrow buttons
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.
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):
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).
Hi,
Thanks for this amazing project. If you add the TS version or support it would be helpfull.
Thanks
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.