@appearhere/bloom/components/Pagination/Pagination.js

Appear Here's pattern library and styleguide

import PropTypes from 'prop-types';
import React, { Component } from 'react';
import cx from 'classnames';

import css from './Pagination.css';
import { PreviousLink, NextLink } from './PaginationLink';

export default class Pagination extends Component {
  static propTypes = {
    currentPage: PropTypes.number.isRequired,
    totalPages: PropTypes.number.isRequired,
    children: PropTypes.node,
    PreviousComponent: PropTypes.func,
    NextComponent: PropTypes.func,
    className: PropTypes.string,
    showPrevNext: PropTypes.bool,
    arrowProps: PropTypes.object,
  };

  static defaultProps = {
    NextComponent: NextLink,
    PreviousComponent: PreviousLink,
    showPrevNext: true,
    arrowProps: {},
  };

  render() {
    const {
      totalPages,
      currentPage,
      className,
      NextComponent,
      PreviousComponent,
      showPrevNext,
      children,
      arrowProps,
    } = this.props;

    return (
      <div className={cx(css.root, className)}>
        {showPrevNext && (
          <span className={css.page}>
            <PreviousComponent
              {...arrowProps}
              page={currentPage - 1}
              disabled={currentPage === 1}
            />
          </span>
        )}
        {children}
        {showPrevNext && (
          <span className={css.page}>
            <NextComponent
              {...arrowProps}
              page={currentPage + 1}
              disabled={currentPage === totalPages}
            />
          </span>
        )}
      </div>
    );
  }
}