I’m trying to build a chat client with React and Meteor. One of the things I find to be relatively tricky is making sure the message box scrolls down when new message are added. I have the following components here:
ChatContainerthat houses a series of…
- as well as a
ChatInputtextarea where the user can send messages
I want the
ChatContainer to scroll down in the following cases:
- When the user sends a message, and
- If the user is scrolled to the bottom of
ChatContainer, then every new
ChatContainerto scroll down.
Normally, in a non-reactive world, I’d poll continuously with AJAX. And I would simply call a
scrollDown() function in the success callback. The problem with React is that each message component doesn’t know whether it’s new or not. I can’t call scrollDown() in
componentDidMount() of every single chat message component or else it’ll fire many times on first load.
Another issue is that each chat message does not know whether or not the
ChatContainer is scrolled down to the very bottom. This is all getting quite confusing for me even just typing this.
Any hints as to how I should structure this?