Pagination component made using Reactstrap PaginationItem and PaginationLink components.
Demo
Live demo
Props
PaginationComponent.propTypes = {
totalItems: PropTypes.number.isRequired,
pageSize: PropTypes.number.isRequired,
onSelect: PropTypes.func.isRequired,
maxPaginationNumbers: PropTypes.number,
defaultActivePage: PropTypes.number
firstPageText: PropTypes.string
previousPageText: PropTypes.string
nextPageText: PropTypes.string
lastPageText: PropTypes.string
size: PropTypes.string
}
Usage
<PaginationComponent totalItems={50} pageSize={5} onSelect={this.handleSelected} />
Update 2.0.0
-
activePage prop changed to defaultActivePage. Now it correctly changes the numbers if the defaultActivePage is bigger than maxPaginationNumbers.
-
Removed use of deprecated method componentWillReceiveProps.
-
It is possible to change any props, including defaultActivePage and it will update correctly (using state).
-
It was added on 1.0.8 but it's worth to mention, the size prop with the values "sm" or "lg" will make smaller or bigger the component. It was an option from the actual Reactstrap PaginationItem component.