Need help with react-chatview?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

jsdevkr
209 Stars 45 Forks Other 324 Commits 12 Opened issues

Description

Infinite scroll chat or feed component for React.js

Services available

!
?

Need anything else?

Contributors list

react-chatview

npm version

Infinite scroll chat or feed component for React.js

Changelog

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:


You can also use a es5 commonjs build:


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

Todo

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.