React Pagination Component
npm install mahesh-react-paginationReact Pagination Component
* The Component supports two kinds of pagination : Static and Remote Pagination.
- For Static pagination, api call makes once. Correnpsonding data for page will be provided to consumer.
- For remote pagination, for each page api call is being made and data will be provided to consumer.
* Component props
- General
- source -> source api url
- pageSize -> no. of elements in page
- beforeLoad -> function that calls before paginating
- afterLoad -> function that calls after pagination with passes data to consumer
- remote -> boolean flagm which indicates whether stratic or remote pagination
- Static Pagination
- resKey -> if api response is not a array, then this key indicates they key in api repsonse which has data array
- Remote Pagination
- totalItemsKey -> key in api response which has total no. of elements info
- queryKeys = {
- currentPage -> currentPage index key for api
- pageSize -> pageSuze key fot api
}
- For remote pagination to work, api should be in following format
- url -> '...?currentPage=1&pgeSize=20'
- res -> {
...
- totalItems : 100
}
- Here totalItemsKey is 'totalItems'
* Examples
import Paginator from 'mahesh/paginator'
- Static Pagination
-
remote={false}
queryKeys={{
currentPage: 'startIndex',
pageSize: 'maxResults'
}}
pageSize={2}
beforeLoad={() => console.log('Loading')}
afterLoad={(data) => console.log(data)}
resKey={'items'}
/>
- Remote Pagination
-
remote={true}
queryKeys={{
currentPage: 'startIndex',
pageSize: 'maxResults'
}}
totalItemsKey={'totalItems'}
pageSize={25}
beforeLoad={() => console.log('Loading')}
afterLoad={(data) => console.log(data))}
/>