react-pager-component v1.0.0

react-pager-component

Pager component for React

Install

yarn add react-pager-component

or

npm install --save react-pager-component

Usage

import React, { Component } from 'react';
import Pager from 'react-pager-component';

class Example extends Component {
  constructor(props) {
    super(props);
    this.state = {
      current: 37,
    }
  }
  render () {
    return (
      <Pager
        length={84}
        current={this.state.current}
        expansion={3}
        onChange={ current => this.setState({ current }) }
      />
    )
  }
}

Props

Also, you can use other html props.

Customization

/*** pager container style ***/
.Pager {
  /* styles */
}

/*** button styles ***/
.Pager .PagerButton {
  /* base button styles */

  /** styles by intent **/
  &--Prev {
    /* previous button style */
  }
  &--Next {
    /* next button style */
  }
  &--Go {
    /* numeric button style */
  }
  &--Rest {
    /* disabled rest button style */
  }
  &--GoFirst {
    /* go first button style */
  }
  &--GoLast {
    /* go last button style */
  }

  /** styles by state **/
  &-is-active {
    /* active button style */
  }
  &-is-disabled {
    /* disabled button style */
  }
}

License

MIT © emr