Page Pagination in React

[quiet mason]

Hi all, I'm currently working on a project that uses page pagination, and we're talking a LOT of pages here (on default settings, the api call returns 25572 results). I have the beginnings of the page pagination hard coded but I'm trying to figure out how to get the pagination to show the pages in batches, and allow me to switch pages when there are potentially over 2000 pages to go through.

If anyone has any ideas I'd love to hear them. The api call gives me the current page, total number of pages and the total number of results, but I can't figure out how to use that data the way I need to.

This is the meta data from the api call

[tulip vale]

I would like to know how to implement this as well... 👀

are you using redux?

[quiet mason]

Nope, just base React on Vite

[tulip vale]

found this tech blog where they create a pagination component and use some mock data.

https://stackblitz.com/edit/react-1zaeqk?file=src%2FPagination.js

from this article
https://www.freecodecamp.org/news/build-a-custom-pagination-component-in-react/

you would think there's an easier way with react-router 🤔

[quiet mason]

The slight issue is that the api call only fetches 1 page of results at a time, and you have to specify which page you want. I don't think React-router will help with that

[quiet mason]

I'll take a closer look through this tomorrow, see if I can make it work, thanks 🙂

[quiet mason]

@tulip vale Managed to follow the tutorial you linked and it works just fine. I'm not that great with custom hooks but this was relatively simple to follow. Thanks again

[agile breach]

@quiet mason you could use https://mantine.dev/core/pagination/

[quiet mason]

Thanks, but I prefer to only use those 3rd party libraries if I absolutely have to, especially since it might not even work given how the API I'm using works.