Merge pull request #1 from remiilekun/props

Classname Props
codenaz · Mar 22, 2019 · e080812 · e080812
2 parents 2caa07d + a2a4ecd
commit e080812
Show file tree

Hide file tree

Showing 4 changed files with 4,179 additions and 4,152 deletions.
diff --git a/README.md b/README.md
@@ -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];
 
@@ -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(() => {