damiisdandy/use-pagination

Prev/Next should be disabled on first/last page

jcubic opened this issue · 2 comments

The demo shows that hover effect over prev/next when there is no prev next so it looks that you can click on it but it does do nothing.

The next/prev arrow should be hidden or don't have a hover effect, best if it has a class that can be styled.

The next and prev button, do nothing when clicked as seen here

// change page based on direction either front or back
  const changePage = (direction: boolean) => {
    setPage((state) => {
      // move forward
      if (direction) {
        // if page is the last page, do nothing
        if (state === pageCount) {
          return state;
        }
        return state + 1;
        // go back
      } else {
        // if page is the first page, do nothing
        if (state === 1) {
          return state;
        }
        return state - 1;
      }
    });
  };

if it's on the last page or first page is simply returns the current state

The hover effect/styling is fully dependent on you implementing it, the main aim of this repo is to talking the usePagination() hook which has no concern with the navigation buttons.

So when you implement this you can use your owning CSS styling based on the current page,

If you would like me to implement this into a library that also returns a component that contains the pagination buttons please share to code and get this repo to 30 stars and I will.

I've also just added the disabled functionality here for the sake of completion.