Do you want to design your own pagination component, but do not want to worry about the logic of pagination? Then this tiny, performant and a11y proof package is for you. react-headless-pagination is ideal if you are working with a utility-based css framework like TailwindCSS. react-headless-pagination offers plenty of customization and is also fully typed.

yarn add react-headless-pagination

Storybook

import { Pagination } from "react-headless-pagination";


...
const [page, setPage] = React.useState<number>(0);

const handlePageChange = (page: number) => {
  setPage(page);
};

return (
  <>
    Current page: {page + 1}
    <Pagination
      {...args}
      currentPage={page}
      setCurrentPage={handlePageChange}
      className=""
      truncableText="..."
      truncableClassName=""
    >
      <Pagination.PrevButton className="">Previous</Pagination.PrevButton>

      <nav className="flex justify-center flex-grow">
        <ul className="flex items-center">
          <Pagination.PageButton
            activeClassName=""
            inactiveClassName=""
            className=""
          />
        </ul>
      </nav>

      <Pagination.NextButton className="">Next</Pagination.NextButton>
    </Pagination>
  </>
);

An example of a styled version can be found in stories/PaginationTailwind.stories.tsx.

Type: number

The value of current page. Required.

Type: (page: number) => void

Callback function once a page is updated. Can be directly used with a setState (see example above).

Type: number

The number pages. Required.

Type: number

The items size of one side of the edge of pagination. Default: 2

Type: number

The items size of one side of the middle of pagination. Default: 2

Type: string

Styles for the pagination container.

Type: string

Text to render if a one or more pages are truncated.

Type: string

Styles which can be applied to the TruncableElement.

Type: string | React.ReactNode

Content for the previous button.

Type: string

Styles for the previous button.

Type: string | React.ReactNode

Content for the next button.

Type: string

Styles for the next button.

Type: React.ReactElement Default:

Provide a custom React Element, such as a next/link component.

Type: string

Type: string

data-testid in case the page button is active.

Type: string

data-testid in case the page button is active.

Type: string

Styles in case the page button is active.

Type: string

Styles in case the page button is inactive.

• Thijs Smudde

Taken inspiration from @makotot/paginated.

PR's are always welcomed.

• Clone

To contribute to this project, start by cloning the repository to your local machine.

• Installation with Yarn

Before getting started, ensure that you have Yarn installed on your system. If not, you can install it by following the instructions on the official Yarn website.

• Run storybook: yarn storybook

To visualize and test components, run Storybook using the following command:

• Build tailwind: yarn watch:css

For styling, the project uses Tailwind CSS. To build Tailwind, run the following command: This command will watch for changes in your CSS files and rebuild Tailwind accordingly. Make sure to run this during development to keep styles up-to-date.