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 /r/codehunter

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • WorkOS - The modern identity platform for B2B SaaS
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • react-infinite

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

  • react-list

    Discontinued :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);

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

    SurveyJS logo
  • 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