Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
  • Loading branch information
codenaz committed Mar 22, 2019
2 parents 5b4692c + a2a4ecd commit aeff7ee
Show file tree
Hide file tree
Showing 4 changed files with 4,179 additions and 4,152 deletions.
40 changes: 23 additions & 17 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,13 @@ Run the following command:
## Usage

```javascript
import React from 'react';
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import Paginator from 'react-hooks-paginator';

function App() {
const [offset, setOffset] = React.useState(0);
const [currentPage, setCurrentPage] = React.useState(1);
const [offset, setOffset] = useState(0);
const [currentPage, setCurrentPage] = useState(1);

const data = [page1, page2, page3, page4, page5, page6];

Expand All @@ -43,33 +43,39 @@ export default App;

## Props

| Property | Type | Description |
| -------------- | -------- | -------------------------------------------------------------- |
| totalRecords | Number | The length of the data we are tabulating |
| pageLimit | Number | Minimum number of records per page |
| pageNeighbours | Number | Number of page blocks by the left and right of the middle page |
| setOffset | function | function that updates the offset state |
| setCurrentPage | function | function that updates the current page state |
| currentPage | Number | The current page state |
| Property | Type | Default | Description |
| ------------------ | ------------------- | ------------ | -------------------------------------------------------------- |
| totalRecords | Number (required) | | The length of the data we are tabulating |
| pageLimit | Number (required) | | Minimum number of records per page |
| pageNeighbours | Number (required) | | Number of page blocks by the left and right of the middle page |
| setOffset | function (required) | | function that updates the offset state |
| setCurrentPage | function (required) | | function that updates the current page state |
| currentPage | Number (required) | | The current page state |
| pageContainerClass | String | `pagination` | Paginator container classname |
| pageActiveClass | String | `active` | Active page item classname |
| pageItemClass | String | `page-item` | Page item classname |
| pageLinkClass | String | `page-link` | Page link classname |
| pagePrevText | String or Node | `Next »` | Prev page item text |
| pageNextText | String or Node | `« Prev` | Next page item text |

## Example

```javascript
import React from 'react';
import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import Paginator from 'react-hooks-paginator';
import { fetchData } from './data-fetcher';

function App() {
const pageLimit = 10;

const [offset, setOffset] = React.useState(0);
const [currentPage, setCurrentPage] = React.useState(1);
const [data, setData] = React.useState([]);
const [currentData, setCurrentData] = React.useState([]);
const [offset, setOffset] = useState(0);
const [currentPage, setCurrentPage] = useState(1);
const [data, setData] = useState([]);
const [currentData, setCurrentData] = useState([]);

useEffect(() => {
fetchData.then(data => setData(data));
fetchData().then(data => setData(data));
}, []);

useEffect(() => {
Expand Down
Loading

0 comments on commit aeff7ee

Please sign in to comment.