Using hook

const { currentPage, handlePageChange, nextPage, prevPage, range } =
  usePagination({
    initialPage: 1,
    totalPages: 20,
  });

// output;
// range => [1, '...', 3, 4, 5, '...', 20]

 handlePageChange(3)

// currentPage => 3
// range => [1, '...', 2, 3, 4, '...', 20]

Example in React component

import usePagination from "use-pagination";

const { currentPage, handlePageChange, nextPage, prevPage, range } =
  usePagination({
    initialPage: 1,
    totalPages: 20,
  });

<div className="pagination">
  <button onClick={prevPage}>Previous</button>
  {range.map((page, i) => {
    if (typeof page === "string") {
      return (
        <span key={i} className="page">
          {page}
        </span>
      );
    }
    return (
      <button
        key={i}
        className={page === currentPage ? "page active" : "page"}
        onClick={() => handlePageChange(page)}
      >
        {page}
      </button>
    );
  })}
  <button onClick={nextPage}>Next</button>
</div>;

Props | hook usePagination

| Props | Type | Description | | -------------- | ------ | ------------------------- | | totalPages | number | The total number of pages | | initialPage | number | The initial page | | boundary | string | The boundary | | onPageChange | func | The callback function | | modeInfinite | bool | The infinite mode | | hiddenBoundary | bool | The hidden boundary |

Packages Status [100% 🔃]

This is a hook created with Rollup.

Changelog and Roadmap

• [x] Documentation
• [x] Testing
• [x] Initial release

Development

To get running locally:

npm install
npm run storybook

# or

npm run dev

Testing

npm run test

Contributing

Please see our contributing guide

License

MIT License