Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/itsdouges/react-scroll-paginator
📃 A lightweight scroll based paginator for ReactJS. Opt out defer pagination until a user clicks a button!
https://github.com/itsdouges/react-scroll-paginator
gw2armory infinite-scroll javascript paginator react react-infinite reactjs scroll
Last synced: 17 days ago
JSON representation
📃 A lightweight scroll based paginator for ReactJS. Opt out defer pagination until a user clicks a button!
- Host: GitHub
- URL: https://github.com/itsdouges/react-scroll-paginator
- Owner: itsdouges
- License: mit
- Created: 2017-05-07T04:22:24.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-05-07T12:50:58.000Z (over 7 years ago)
- Last Synced: 2024-04-24T23:20:15.047Z (8 months ago)
- Topics: gw2armory, infinite-scroll, javascript, paginator, react, react-infinite, reactjs, scroll
- Language: JavaScript
- Homepage:
- Size: 1020 KB
- Stars: 2
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# [react-scroll-paginator](https://github.com/madou/react-scroll-paginator)
[](https://www.npmjs.com/package/react-scroll-paginator)
[](https://www.npmjs.com/package/react-scroll-paginator)
[](https://travis-ci.org/madou/react-scroll-paginator)
[](https://codecov.io/gh/madou/react-scroll-paginator)
[](https://david-dm.org/madou/react-scroll-paginator)
A lightweight scroll based paginator for ReactJS.
## Installation
```sh
npm install react-scroll-paginator
```
## Usage
```javascript
import ReactStickyHeader from 'react-scroll-paginator';
class View extends Component {
state: {
rows: Array,
count: number,
limit: number,
offset: number,
} = {
rows: [],
};
props: {
infiniteScroll?: boolean,
};
fakeApi = createFakeApi();
action = () => {
return this.fakeApi().then((data) => {
this.setState((state) => ({
...data,
rows: state.rows.concat(data.rows),
}));
});
};
renderChild (row: number, index: number) {
return (
{row}
);
}
render () {
return (
LOADING...
>
{this.renderChild}
);
}
}
```
| 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/`.
```bash
npm start
```
## Testing
```bash
npm test
```