my-react-paginator v1.0.5

Table of Contents

• 1. Installation
• 2. Usage
• 3. Demo
• 4. Full Example
• 5. Props

1. Installation:

Install my-react-paginator:

npm install my-react-paginator --save

or

yarn add my-react-paginator

2. Usage:

App.js

import Paginator from 'my-react-paginator';

<Paginator page={1} totalPages={10} onPageChange={onPageChange} />;

3. Demo:

4. Full Example:

App.js

import React from 'react';
import Paginator from 'my-react-paginator';

function App() {
  var [page, setPage] = React.useState(1);

  function onPageChange(num) {
    setPage(num);
  }
  function back() {
    setPage(--page);
  }
  function next() {
    setPage(++page);
  }
  return (
    <div>
      <Paginator
        buttonStyle={{ width: 40, height: 40 }}
        pageStyle={{ borderRadius: 10 }}
        activeColor='navy'
        position='center'
        nextLabel='next'
        backLabel='back'
        onBack={back}
        onNext={next}
        page={page}
        totalPages={12}
        onPageChange={onPageChange}
      />
    </div>
  );
}
export default App;

For more examples and styles please check https://github.com/yamanAbd/react-paginator/tree/master/examples

5. Props: