React-pagination integration with bootstrap button classes

example.scss

//paths for meteor and node
@import "../../../node_modules/bootstrap/scss/mixins";
@import "../../../node_modules/bootstrap/scss/utilities";
@import "../../../node_modules/bootstrap/scss/buttons";

//example screenshot https://twitter.com/B3aT/status/864809895249555458
//I wanted the Active button to be bigger, but the react-pagination doesn't externalize the 
//active - Link property, so this is a css workaround 
//also it makes a fade-out for non-clickable elements

  .nav-pagination {
    height: 3.4rem;
    .active {
      .btn-outline-primary {
        @extend .btn-lg;
        @extend .btn-primary;
      }
    }

    .disabled {
      & > .btn {
        opacity: 0.4;
        &:hover {
          background-color: transparent;
        }
      }
    }
  }

pagination-example.jsx

const example = {
  getCurrentPageIndex: function () {
        let perPage = 15;
        let page = this.state.page;

        return [Math.max(0, (page) * perPage), (page + 1) * perPage];
    },
    getPagination: function (entries) {
        try {
            let perPage = 15;
            let count = entries.length;
            let pages = Math.ceil(count / perPage);
            let comp = this;

            //https://github.com/AdeleD/react-paginate
            return <ReactPaginate
                pageCount={pages}
                pageRangeDisplayed={5}
                marginPagesDisplayed={1}
                disableInitialCallback={false}
                onPageChange={(newPage) => {
                    // Meteor.isDevelopment && console.log("newPage", newPage);
                    comp.setState({
                        page: parseInt(newPage.selected)
                    })
                }}
                initialPage={parseInt(comp.state.page)}
                forcePage={parseInt(comp.state.page)}
                containerClassName="text-center w-100 nav-pagination"
                pageClassName="d-inline-block"
                previousClassName="d-inline-block"
                nextClassName="d-inline-block"
                pageLinkClassName="btn btn-outline-primary"
                activeClassName="active"
                previousLinkClassName="btn btn-outline-primary"
                breakClassName="btn btn-outline-primary disabled"
                nextLinkClassName="btn btn-outline-primary"
                disabledClassName="disabled"
                previousLabel="<<<"
                nextLabel=">>>"
            />
        } catch (err) {
            error(err);
            return <p>Internal shenanigans :(</p>
        }
    }
};