A React component that provides pagination.
npm install pagination-component --save
yarn add pagination-component
To build and run the demo:
- Clone this repository:
git clone https://github.com/dibenso/pagination-component.git
- Install dependencies:
- Start demo server:
Then check http://localhost:3000
The component accepts 5 required props:
currentPage (type: int)
Indicates the current page of pagination. It is zero based, so the first page is indicated by 0.
pageCount (type: int)
Indicates how many pages to paginate through. For example if the current page is 0 and pageCount is 50. The result of the pagination will show:
first 1 2 3 4 5 6 7 8 9 10 ... next last
Clicking the "last" link will callback with 49 (page 50) in the onPageClick prop.
pageLinkClassName (type: string | object)
If this prop is a string, then the prop indicates the className of the css to use for all links in pagination. Example style:
Then import this css into js:
styles.pageLink in for this prop to use these styles.
If this prop is a object, then the prop indicates the style to use. This is useful for CSS in JS libraries like glamor. Example using glamor:
;const pageLink =
Then pass the pageLink object in for this prop.
- currentLinkClassName (type: string | object)
This works the same way as pageLinkClassName except its styling is for the page link for the current page. Use this prop to make a visual difference between the current page link and the others. Example style:
Pass this prop to the component in the same was as pageLinkClassName.
- onPageClick (type: function)
This is called everytime a page link is clicked. This callback accepts the page that was clicked. Remember, the page is zero based. So when a user clicks on a page link that is displayed as 15, the value passed to this callback will be 14. Here's how one might use this prop with the history API and perhaps react-router:
Full example (using glamor for styles):
;;const pageLink =const currentLink =let Example = React
To run the tests:
- Install dependencies from package.json
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -am 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request :D