Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 945
Umbro Avatar asked Jan 25 '23 20:01

Umbro


1 Answers

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

like image 89
Majid Amiri Avatar answered Jan 28 '23 10:01

Majid Amiri