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;

5. Props:

Prop name	Description	Type	Default value
page	Required. Current page.	Number	-
totalPages	Required. The total number of pages.	Number	-
onPageChange	Required. The function to call when a page is changed.	Function	-
containerStyle	Container style for component.	Object	-
pageStyle	Style of the page number component.	Object	-
buttonStyle	Style of the back, next components.	Object	-
activeColor	Background color of active page, back, and next components.	String	black
position	Position of paginator.	'right'| 'center'| 'left'	'center'
backLabel	Back button Text.	String	Back
nextLabel	Next button Text.	String	Next
onBack	The function to call when back button is clicked.	Function	-
onNext	The function to call when next button is clicked.	Function	-