Have ideas to improve npm?Join in the discussion! »


    0.2.5 • Public • Published


    npm version

    Infinite scroll chat or feed component for React.js


    Live Demo

    Live Demo

    Here is the live demo, and source code to the live demo, also here is a simpler fiddle.

    Why another infinite scroll component?

    As of time of this writing, other efforts are missing killer features:

    • browser layout & resize "just works" (no need to know any heights in advance)
    • Works as newsfeed (infinite load down) or chat (infinite load up)
    • hardware accelerated scrolling

    This work originated as a fork and modifications of seatgeek/react-infinite, and was subsequently rewritten several times.

    Getting started

    Install react-chatview using npm.

    npm install react-chatview --save

    You can also use a global-friendly UMD build:

    <script src="path-to-react-chatview/dist/react-chatview.min.js"></script>

    You can also use a es5 commonjs build:

    <script src="path-to-react-chatview/lib/react-chatview.js"></script>


    It is really easy to use. The actual rows of content should be passed as children. There are four interesting props:

    • className extra css class string for the container
    • flipped true for chat (newest at bottom), regular for newsfeed (newest at top)
    • reversed true for don't reverse elements
    • scrollLoadThreshold pixel distance from top that triggers an infinite load
    • shouldTriggerLoad callback function to check if chat view should trigger infinite load cycle when scroll passed scrollLoadThreshold. This callback is optional and by default onInfiniteLoad is always triggered.
    • onInfiniteLoad load request callback, should cause a state change which renders more children
    • returnScrollable return scollable object for scrollable event handling

    See the jsfiddle example for a complete working example.


    • Not actually infinite - currently all elements that have been loaded remain the dom

    • auto-scroll to newest message when appropriate (pinning)

      use returnScrollable and set scrollable.scrollTop to scrollable.scrollHeight

    • auto-correct scroll jitter when content resizes or is added above/below the focus point

    • configurable loading spinner

    • optimize for mobile (but it works)

    There are probably more features missing. Please open an issue!

    Please write me if you use this! :)

    If this project is valued I will invest more time in it.


    npm i react-chatview

    DownloadsWeekly Downloads






    Last publish


    • avatar
    • avatar