react-scroll-paginator
A lightweight scroll based paginator for ReactJS.
Installation
npm install react-scroll-paginator
Usage
; state: rows: Array<number> count: number limit: number offset: number = rows: ; props: infiniteScroll?: boolean ; fakeApi = ; { return this; }; { return <li key=index className="View_child"> row </li> ; } { return <div> <ReactScrollPaginator ...thisprops action=thisaction rows=thisstaterows count=thisstatecount limit=10 initialOffset=0 progressComponent=<div className="View_progress">LOADING...</div> > thisrenderChild </ReactScrollPaginator> </div> ; }
prop | type | required |
---|---|---|
children | (item: T, index: number) => Children | yes |
limit | number | yes |
count | number | yes |
rows | Array | yes |
action | (limit: number, offset: number) => Promise<*> | yes |
initialOffset | number | no |
className | string | no |
progressComponent | Children | no |
infiniteScroll | boolean | no |
renderContainer | (props: ContainerProps) => Children | no |
renderButton | (props: ButtonProps) => Children | no |
Props
children: (item: T, index: number) => Children
Takes a function that returns some jsx.
limit: number
How big each page should be.
count: number
Total number of rows to expect for all pages combined.
rows: Array
Array of rows that can be of any type.
action: (limit: number, offset: number) => Promise<*>
Action that the paginator will call to load more data. Expects the function to return a promise that will eventually resolve.
initialOffset: number
If you want to start from a position other than 0, set this.
className: string
progressComponent: Children
Component to render when the paginator is loading.
infiniteScroll: boolean
Set this to true if you want pagination to start immediately when the user scrolls into view. Don't set this if you want the user to interact with a "LOAD MORE" button to begin pagination.
renderContainer: (props: ContainerProps) => Children
Set this to override the default ul
container with something else. It is passed children
in props.
renderButton: (props: ButtonProps) => Children
Set this to override the default load more button
. It is passed a onClick
in props.
React Story Book
To run the component in various modes, run the following command then go to http://localhost:6006/
.
npm start
Testing
npm test