react-chatview

Infinite scroll chat or feed component for React.js

Changelog

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.

Documentation

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)
• 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

See the jsfiddle example for a complete working example.

Todo

• Not actually infinite - currently all elements that have been loaded remain the dom
• auto-scroll to newest message when appropriate (pinning)
• 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.