use-pagination-pull

use Hook Pagination pull | Hook

The usePagination hook is a custom hook to handle pagination in React applications. With it, you can generate a pagination sequence and navigate between pages.

Documentation storybook

storybook

Stacks

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