@hoangnguyen035/paginova-react

8 beautiful pagination variants for React. Zero runtime dependencies (peer: react ≥17).

npm install @hoangnguyen035/paginova-react @hoangnguyen035/paginova-core @hoangnguyen035/paginova-styles

import { Pagination } from '@hoangnguyen035/paginova-react';
import '@hoangnguyen035/paginova-styles/paginova.css';

function App() {
  const [page, setPage] = useState(1);
  return (
    <Pagination
      variant="pills"
      totalPages={20}
      page={page}
      onPageChange={setPage}
    />
  );
}

Headless hook

import { usePagination } from '@hoangnguyen035/paginova-react';

const { state, goTo, next, prev, first, last } = usePagination({
  totalPages: 20,
  defaultPage: 1,
});
// state.range = [1, '...', 4, 5, 6, '...', 20]

Props

interface PaginationProps {
  variant?: Variant;                 // 'classic' | 'pills' | 'dots' | ...
  totalPages: number;
  page?: number;                     // controlled
  defaultPage?: number;              // uncontrolled
  siblingCount?: number;
  boundaryCount?: number;
  theme?: 'dark' | 'light';
  ariaLabel?: string;
  className?: string;
  onPageChange?: (page: number) => void;
}

Variants

classic · pills · dots · bordered · track · compact · progress · steps

License: MIT