0.0.7 • Published 5 years ago
react-studio-paginator v0.0.7
react-studio-paginator
A react paginator component that displays a list of items in a numbered page
Props
| Name | Type | Descriptions |
|---|---|---|
| customElement | (index:number)=> React.ReactNode | This is a method that will be called to retrieve a single item of the paginator. |
| elementsPerView? | number | The number of elements to be shown in one page |
| totalElements | number | Total number of elements to be shown in different pages |
| defaultPageIdx? | number | This can be set if you need to start the page from a different index |
| showPaginatorControls? | boolean | True if it should show the controls and the page numbers |
| className? | string | Parent element class name |
| previousButton? | React.ReactNode | Component for the previous button |
| nextButton? | React.ReactNode | Component for the next button |
| pageStatusComponent? | (currentPage:number, totalPages:number) =>React.ReactNode | This is a function to show the current page status |
Default Props
| Name | Default |
|---|---|
| className | "" |
| showPaginatorControls | true |
| elementsPerView | 10 |
| previousButton | <button>Previous</button> |
| nextButton | <button>Next</button> |
| pageStatusComponent | (e,i)=> `${e} of ${i}`} |
Installation
$ npm install --save react-studio-paginatorUsage
import {Paginator} from "react-studio-paginator";Simple Example
<Paginator
totalElements={data.length}
customElement={(idx)=>{
let item = data[idx];
return <div>{item.label}</div>
}}
/>Other Links
More details on how to use this component can be found in this article