Converting pagination from `react-js-pagination` to` react-bootstrap` pagination

Question

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/ ?

Answer 1

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