Ready-to-use wrapper for react-bootstrap Pagation component
npm install @vlsergey/react-bootstrap-pagination
npm i --save @vlsergey/react-bootstrap-pagination
`
or
`
npm i --save-dev @vlsergey/react-bootstrap-pagination
`
Usage
`jsx
`
Important note: value is 0-based unless changed with firstPageValue.
Props
| Property | Default value | Description |
| ---------------- |:-------------:| ----------- |
| value | required | Current page. Value is 0-based unless changed with firstPageValue. Displayed page label is value - firstPageValue + 1. |
| totalPages | undefined | Total number of pages. |
| onChange | | Should be provided if not readOnly or disabled. See below. |
| name | 'page' | Name of component returned in target structure in onChange. |
| readOnly | false | Allow or do not allow user to change values by clicking on items. |
| disabled | false | Technically the same as readOnly, but appearance may change in future versions. |
| firstPageValue | 0 | Internal value of first page (first page index) used by value and onChange attributes. Usually 0 (default) or 1. |
| showFirstLast | true | Show or hide '<<' and '>>' items ( and ) |
| showPrevNext | true | Show or hide '<' and '>' items ( and ) |
| atBeginEnd | 2 | How many first and last pages links to display (in addition to '<<' and '>>') |
| aroundCurrent | 1 | How many prev and next linkes to display (in addition to '<<' and '>>') |
The argument of onChange is event-alike structure with target property (with name and value subproperties). If one stores page number in state he can use same method as for usual form field:
`js
handlePageChange( { target: { value } } ) {
this.setState( { page: value } );
}
`
If you have other fields (like page size), you can specify name property of and use single handler:
`jsx
class MyComponent extends PureComponent {
state = {
page: 0,
size: 10,
}
handleChange( {target: {name, value }} ) {
this.setState( { [name]: value } );
}
render() {
const { page, size } = this.state;
return <>
}
}
`
Examples
`jsx
`
`jsx
`
`jsx
`
Changelog
Undescribed minor versions are for dependencies updates.
3.2.1
* 🐛 Make firstPageValue optional
3.2.0
* 🎨 Allow to change first page value with firstPageValue attribute
3.1.0
* 🎨 Export PropsType and OnChangeEventType interfaces
3.0.2
* 🐛 Add missing key attribute to PaginationItemWrapper in PaginationWrapper
3.0.1
* 🐛 Fixed incorrect implementation of page item click handler
3.0.0
* ✨ Allow totalPages to be undefined
* 🔨 Change from class component to function
* 🔨 Add strict option to TypeScript's compilerOptions
* ⬆️ Migrate to js-config 8.1 with new eslint rules
* 👷 Migrate from TravisCI to GitHub Actions
2.2.4
* 🐛 Fixed infinite cycle when Infinity (Number.POSITIVE_INFINITY) passed as value of totalPages
2.2.3
* 📦 Set target for both CommonJS & ESM to ES5, since WebPack 5 picks ESM and forgot to transpile it with tsc.
2.2.2
* 📦 Set target for CommonJS to ES5
2.2.1
* 🐛 Make optional props optional from TypeScript point of view.
2.2.0
* 📦 Set target for ESM to ES2020
* 🛠 Add properties from bootstrap Pagination to wrapper props (to allow passed down props like style)
* 🛠 Update dependencies
2.1.0
* 📦 Add hybrid CommonJS + ESM packaging.
2.0.0
* ⚡ Move from flow to TypeScript.
1.0.1
* 🐛 Fix main file link in package.json`