react-infinity-loading
🏄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:
;//demo loading component; Component { //default emitter exported thisemitter = 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 <InfiniteLoading> initialized before user scroll, usually when page loaded thisinitLoadingListener = thisemitter; //handler for page scroll when the <InfiniteLoading> may be visible thisloadingListener = thisemitter; } { //remove event listener before unmount thisinitLoadingListener; thisloadingListener; } { return <div> <ul> <li></li> /*... your list map*/ </ul> <InfiniteLoading className="custom-css-class" delay=1000 loader=<Loading/>/> </div> }
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 phaseTYPE.ALL_LOADED
: when you've done loading all your data, you should notify InfiniteLoading to stop listen for user scroll byemitter.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-2018 jason