Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jasonboy/react-infinity-loading
:surfer:Event-driven, fully-controlled infinite scroll loading for React
https://github.com/jasonboy/react-infinity-loading
infinite-loading infinite-scroll lazy-loading react
Last synced: about 1 month ago
JSON representation
:surfer:Event-driven, fully-controlled infinite scroll loading for React
- Host: GitHub
- URL: https://github.com/jasonboy/react-infinity-loading
- Owner: JasonBoy
- License: mit
- Created: 2017-08-14T12:45:38.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-01-28T14:59:39.000Z (almost 6 years ago)
- Last Synced: 2024-11-17T14:06:52.839Z (about 2 months ago)
- Topics: infinite-loading, infinite-scroll, lazy-loading, react
- Language: JavaScript
- Homepage:
- Size: 1.62 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-infinity-loading
[](https://www.npmjs.com/package/react-infinity-loading)
[](https://github.com/prettier/prettier)
:surfer:Event-driven, fully-controlled infinite scroll loading for React
### Why
There are a lot of infinite scroll components out there, and I tried some of them, which usually handles and hide many details inside, and you can't control every phase when you scroll down the page, which makes it really unpredictable in some cases, and as a result, I have to create yet another component to let you control every part of the scroll phases based on a simple event emitter.
## Usage
`npm i react-infinity-loading --save` or `yarn add react-infinity-loading`
and in your component:
```javascript
import InfiniteLoading, {emitter, TYPE, EventEmitter} from 'react-infinity-loading';
//demo loading component
import Loading from 'react-infinity-loading/components/Loading';
class App extends React.Component {
constructor(props) {
//default emitter exported
this.emitter = emitter;
//or create a new EventEmitter instance to prevent conflict with the default one if you have multiple InfiniteLoading instances on the same page
// this.emitter = new EventEmitter();
//add handler after the initialized before user scroll, usually when page loaded
this.initLoadingListener = this.emitter.addListener(TYPE.INIT_LOADING, () => {
//load your own data
this.loadData();
});
//handler for page scroll when the may be visible
this.loadingListener = this.emitter.addListener(TYPE.LOADING, () => {
//load your own data when user scroll to page bottom
this.loadData();
});
}
componentWillUnmount() {
//remove event listener before unmount
this.initLoadingListener.remove();
this.loadingListener.remove();
}
render() {
return (
-
{/*... your list map*/}
}/>
)
}
}
```
## Events
### Fired from InfiniteLoading component
- `TYPE.INIT_LOADING`: fired on component initialization(usually on page loaded)
- `TYPE.LOADING`: fired every time when user scroll to the bottom, this is when you need to load more data from your api
### Fired by you
- `TYPE.LOADING_FINISHED`: every time after you load more chunk of data, emit this event to notify InfiniteLoading to finish the current loading phase
- `TYPE.ALL_LOADED`: when you've done loading all your data, you should notify InfiniteLoading to stop listen for user scroll by `emitter.emit(TYPE.ALL_LOADED)`.
- `TYPE.REINITIALIZE`: sometimes when you changed the search filters, you may need to reset the loading status/pagination, this is the event you need to tell InfiniteLoading to reset all events, and re-init the scroll process, just like the first initialization.
## Demo
Open `./build/index.html` in your browser, and start scroll down the page.
## LICENSE
MIT @ 2017-2019 [jason](https://blog.lovemily.me)