NaNoWriMo Promotes Manuscription
    Wondering what’s next for npm?Check out our public roadmap! »

    react-intersection-observing-infinity-scroll
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.1 • Public • Published

    react-intersection-observing-infinity-scroll GitHub Starts GitHub contributors Node version React Version

    Chrome Firefox IE Opera Safari
    9+ ✔

    example page

    React component that supports infinity scroll with tiny size (< 3kb without gzip)
    It supports SSR build and fallback render with <div> element.

    This library doesn't use any eventListener for scroll event. Rather than eventListener, It uses Intersection Obeserver API. This is the reason why you need polyfill.

    Also, this library is written in TypeScript.

    Before install

    You should install intersection Observer polyfill.
    You can choose all possible ways to install the polyfill, however the polyfill MUST comes before the library script.
    I think you can optimize polyfill strategy like Polyfill.io.

    example

    <!-- Load the polyfill first. -->
    <script src="path/to/intersection-observer.js"></script>
    
    <!-- Load all other JavaScript. -->
    <script src="react-intersection-observing-infinity-scroll.js"></script>
    

    How to install

    IMPORTANT
    You should install intersection Observer polyfill to support IE & elder browsers.

    $ npm install -S react-intersection-observing-infinity-scroll
    
    

    How to use

    <InfiniteScroll
      loadMoreFunc={loadMore}
      isLoading={isLoading}
      hasMore={!isEnd}
      loaderComponent={<div className="loader">{this.renderLoadingSpinner()}</div>}
    >
      {/* list content */}
    </InfiniteScroll>
    

    If you want to see detail implementation, visit example page and code.

    To Do

    • Support server side build for Universal rendering.
    • Support position: fixed user custom loading component.
    • Support Reverse direction infinite scrolling.
    • Hide invisible items with some buffer for the performance enhancement.

    Install

    npm i react-intersection-observing-infinity-scroll

    DownloadsWeekly Downloads

    2

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    8.87 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar