React-swag-pagination NPM

react-swag-pagination

such a cool paginator component

Install

yarn add react-swag-pagination

You can choose between the Pagination and the SimplePagination component, the firstone is a classic paginator wich mutates in compact when the steps are smaller than 6 and the lastone is a slim version.

Demo

https://padrisimo.github.io/react-swag-pagination/

Usage

Pagination

import React, { Component } from 'react';
import { Pagination } from 'react-swag-pagination';

export default class App extends Component {
  state = {
    page: 15,
    steps: 20
  }

  nav = page => this.setState({page});
  next = () => this.setState({page: this.state.page + 1 });
  back = () => this.setState({page: this.state.page - 1 });
  last = () => this.setState({ page: this.state.steps });
  first = () => this.setState({page: 1});
  
  render() {
    const { steps, page } = this.state;
    return (
      <div>
        <div>{page}</div>
        <Pagination 
          steps={steps} 
          defaultStep={page}
          callbackNav={this.nav}
          callbackNext={this.next}
          callbackPrev={this.back}
          callbackLast={this.last}
          callbackFirst={this.first}
          font="sans-serif"
          color="#8bc34a"
           />
      </div>
    )
  }
}

SimplePagination

import React, { Component } from 'react';
import { SimplePagination } from 'react-swag-pagination';

export default class App extends Component {
  state = {
    page: 1,
    steps: 5
  }

  nav = page => this.setState({page});
  next = () => this.setState({page: this.state.page + 1 });
  back = () => this.setState({page: this.state.page - 1 });
  
  render() {
    const { steps, page } = this.state;
    return (
      <div>
        <div>{page}</div>
        <SimplePagination 
          steps={steps} 
          defaultStep={page}
          callbackNav={this.nav}
          callbackNext={this.next}
          callbackPrev={this.back}
          font="serif"
          color="indigo"
           />
      </div>
    )
  }
}

Pagination Props

props	type	default
steps	Int	6
defaultStep	Int	1
callbackPrev	func	() => console.log('previous page')
callbackNext	func	() => console.log('next page')
callbackFirst	func	() => console.log('first page')
callbackLast	func	() => console.log('last page')
callbackNav	func	(page) => console.log('go to page ', page)}
color	String	#2196f3
font	String	Roboto

SimplePagination Props

props	type	default
steps	Int	5
defaultStep	Int	2
callbackPrev	func	() => console.log('previous page')
callbackNext	func	() => console.log('next page')
callbackNav	func	(page) => console.log('go to page ', page)}
color	String	#2196f3
font	String	Roboto