React-pagination

react-pagination is a small, highly customizable, component to render the pagination.

Installatio

Install using Yarn:

yarn add @resourge/react-pagination

or NPM:

npm install @resourge/react-pagination --save

Usage

import { Pagination } from '@resourge/react-pagination';

function App() {
  const [page, setPage] = useState(0);
  return (
    <Pagination 
      /**
       * Current page
       */
      page={page}
      /**
       * Total page number
       */
      totalPages={10}
      /**
       * Number of "pages" displaying.
       * * Note: Current page will try to stay in the middle
       */
      displayRange={5}
      /**
       * If pagination is disabled
       */
      disabled={false}
      /**
       * Method for "page" click
       */
      onPageChange={setPage}
      /**
       * Method to render the "page" for first page
       * * When undefined the item will not be included
       */
      renderFirst={() => 'Icon for first Page'}
      /**
       * Method to render the "page" for previous page
       * * When undefined the item will not be included
       */
      renderPrevious={() => 'Icon for previous Page'}
      /**
       * Method to render the "page" for next page
       * * When undefined the item will not be included
       */
      renderNext={() => 'Icon for next Page'}
      /**
       * Method to render the "page" for last page
       * * When undefined the item will not be included
       */
      renderLast={() => 'Icon for last Page'}
    />
  )
}

Others

javascript: Pagination

react-hook: React-hook-pagination

License

MIT Licensed.