@highlight-ui/pagination

Using npm:

npm install @highlight-ui/pagination

Using yarn:

yarn add @highlight-ui/pagination

Using pnpm:

pnpm install @highlight-ui/pagination

In your (S)CSS file:

@import url('@highlight-ui/pagination');

Once the package is installed, you can import the library:

import { Pagination } from '@highlight-ui/pagination';

Usage

import React from 'react';
import { Pagination } from '@highlight-ui/pagination';

export default function PaginationExample() {
  return (
    <Pagination
      offset={0}
      total={100}
      limit={10}
      maxItems={5}
      onChange={handleChange}
    />
  );
}

Props 📜

| Prop | Type | Required | Default | Description | | :------------------ | :------------------------- | :------- | :------------------- | :------------------------------------------------------------------------------------ | | limit | number | Yes | | How many items are shown on the page | | offset | number | Yes | | Used to calculate current page | | total | number | Yes | | Total number of items | | onChange | (offset: number) => void | Yes | | Callback that is invoked when the page is selected or navigation buttons are clicked. | | firstPageIconName | string | No | angle-double-left | Icon for "go to the first page" button | | lastPageIconName | string | No | angle-double-right | Icon for "go to the last page" button | | maxItems | number | No | 0 | How many page buttons are shown | | nextPageIconName | string | No | angle-right | Icon for "go to the next page" button | | prevPageIconName | string | No | angle-left | Icon for "go to the previous page" button | | className | string | No | | Allows providing a custom class name |

Contributing 🖌️

Please visit personio.design for usage guidelines and visual examples.

If you're interested in contributing, please visit our contribution page.