I have a ready pagination component: https://www.npmjs.com/package/react-js-pagination
import React, { Component } from "react";
import ReactDOM from "react-dom";
import Pagination from "react-js-pagination";
require("bootstrap/less/bootstrap.less");
class App extends Component {
constructor(props) {
super(props);
this.state = {
activePage: 1,
todos: []
};
}
handlePageChange(pageNumber) {
console.log(`active page is ${pageNumber}`);
this.setState({activePage: pageNumber});
}
render() {
return (
<div>
<Pagination
activePage={this.state.activePage}
totalItemsCount={this.state.todos.length}
pageRangeDisplayed={2}
onChange={this.handlePageChange}
/>
</div>
);
}
}
How to transform pagination from react-js-pagination
toreact-bootstrap
pagination https://react-bootstrap.github.io/components/pagination/ ?
react-bootstrap
pagination is just a UI component that renders the pagination items and can't handle the stuff react-js-pagination
is handling. It is mentioned in react-js-pagination
docs that you can import your own CSS style and use the classes for the pagination items. So just importing bootstrap
style is enough and then you can do this:
import "bootstrap/dist/css/bootstrap.min.css";
<ReactPagination
itemClass="page-item"
linkClass="page-link"
hideNavigation
activePage={2}
itemsCountPerPage={10}
totalItemsCount={450}
pageRangeDisplayed={5}
/>
Check this Codesandbox: https://codesandbox.io/s/polished-darkness-pm7v8?fontsize=14
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With