How to implement a React infinite scroll component for a chat app like Facebook Messenger?

This page summarizes the projects mentioned and recommended in the original post on reddit.com/r/codehunter

Our great sponsors
  • Appwrite - The Open Source Firebase alternative introduces iOS support
  • Scout APM - Less time debugging, more time building
  • SonarQube - Static code analysis for 29 languages.
  • react-infinite

    react-infinite: my first attempt, abandoned because it needs to know the heights of all the elements in advance;

  • react-list

    :scroll: A versatile infinite scroll React component. [Moved to: https://github.com/caseywebdev/react-list] (by coderiety)

    react-list: I found it really powerful, the thing is that if I close my popover and reopen it after sometimes it loses some already rendered messages and it seems to me that it could be a bug of the react-list component. Also, the component does not allow me to display the scrolling bottom upwards (see https://github.com/coderiety/react-list/issues/50);

  • Appwrite

    Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  • react-virtualized

    React components for efficiently rendering large lists and tabular data

    react-virtualized: very powerful, but I found it tricky to use List with an InfiniteLoader together with AutoSizer, CellMeasurer and CellMeasurerCache. Also, as I send a message if I call List.scrollToIndex(lastIndex) to scroll automatically the container to the bottom the scroll does not reach the bottom completely, as the scrollable container has top and bottom padding. I couldn't achieve a satisfiable result with this component.

  • react-infinite-any-height

    ReactJS component for displaying infinite list of elements with arbitrary height.

    react-infinite-any-height: I would like to give it a try, but currently it seems that it hasn't been ported to React 16 yet if I install it NPM warns me about an unsatisfied peer dependency of React 15, but I use React 16.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts