Pagination

Result

Loading...

Live Editor

function Example() { const [activePage, setActivePage] = React.useState(); function handlePageClick(e, activePage) { setActivePage(activePage); } return ( <Pagination id="pagination-demo" amount={20} activePage={activePage} onPageClick={handlePageClick} /> ); }

function Example() {
  const [activePage, setActivePage] = React.useState();

  function handlePageClick(e, activePage) {
    setActivePage(activePage);
  }

  return (
    <Pagination
      id="pagination-demo"
      amount={20}
      activePage={activePage}
      onPageClick={handlePageClick}
    />
  );
}

First and Last

If you have a lot of pages, the showFirstAndLast prop will enable buttons that allow the user to jump to the first or last page.

Result

Loading...

Live Editor

function Example() { const [activePage, setActivePage] = React.useState(); function handlePageClick(e, activePage) { setActivePage(activePage); } return ( <Pagination id="pagination-demo" amount={20} activePage={activePage} onPageClick={handlePageClick} showFirstAndLast /> ); }

function Example() {
  const [activePage, setActivePage] = React.useState();

  function handlePageClick(e, activePage) {
    setActivePage(activePage);
  }

  return (
    <Pagination
      id="pagination-demo"
      amount={20}
      activePage={activePage}
      onPageClick={handlePageClick}
      showFirstAndLast
    />
  );
}

Size

Result

Loading...

Live Editor

function Example() { return ( <div> <Pagination id="pagination-demo" amount={20} size="sm" /> <Pagination id="pagination-demo" amount={20} size="md" /> </div> ); }

function Example() {
  return (
    <div>
      <Pagination id="pagination-demo" amount={20} size="sm" />
      <Pagination id="pagination-demo" amount={20} size="md" />
    </div>
  );
}

Analytics

The Pagination component is trackable through Kyber Analytics. This is the default analytics config.

export default {
	value: 'Pagination',
	actions: {
		onPageClick: { type: 'PAGINATION_PAGECLICK', payload: 'Click' },
	},
};

Props