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

You have all the information you need in the links you provided to do this conversion yourself. If you're stuck on a specific problem related to it, you need to be more clear. What exactly have you tried so far? What errors or behavior are you seeing? StackOverflow does not exist to simply write your code for you. Try doing it yourself first. — jered
– jered, Commented Sep 12, 2019 at 18:34

Majid Amiri · Accepted Answer · 2019-09-13 15:57:14Z

7

+25

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

answered Sep 13, 2019 at 15:57

Majid Amiri

5904 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Coffezilla · Accepted Answer · 2021-09-13 18:47:29Z

0

I use the react-bhx-pagination because you can get the json, auto load when you get to the end of the page and it's very easy to use and change.

Example: Online demo

Component: react-bhx-pagination

answered Sep 13, 2021 at 18:47

Coffezilla

3862 silver badges7 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related