React component for keeping components scrolled down

// messages.jsx
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import StayScrolled from 'react-stay-scrolled';
import Message from './message.jsx';

const Messages = ({ messages }) => (
  <StayScrolled component="div">
  {
    messages.map(
      (message, i) => <Message key={i} text={message} />
    )
  }
  </StayScrolled>
);

Messages.propTypes = {
  messages = PropTypes.array
}

// message.jsx
import React, { Component, propTypes } from 'react';
import { scrolled } from 'react-stay-scrolled';

class Message extends Component {
  static propTypes = {
    stayScrolled: PropTypes.func,
    scrollBottom: PropTypes.func,
  }

  componentDidMount() {
    const { stayScrolled, scrollBottom } = this.props;

    // Make the parent StayScrolled component scroll down if it was already scrolled
    stayScrolled();

    // Make the parent StayScrolled component scroll down, even if not completely scrolled down
    // scrollBottom();
  }

  render() {
    return (<div>{this.props.text}</div>);
  }
}

export default scrolled(Message);

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import StayScrolled from 'react-stay-scrolled';

class Messages extends Component {
  componentDidUpdate(prevProps) {
    if(prevProps.messages.length < this.props.messages.length)
      this.stayScrolled(); // Or: this.scrollBottom
  }

  storeScrolledControllers = ({ stayScrolled, scrollBottom }) => {
    this.stayScrolled = stayScrolled;
    this.scrollBottom = scrollBottom;
  }

  render() {
    const { messages } = this.props;

    return (
      <StayScrolled provideControllers={this.storeScrolledControllers}>
      {
        messages.map(
          (message, i) => <Message key={i} text={message} />
        )
      }
      </StayScrolled>
    );
  }
}

// messages.jsx
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import StayScrolled from 'react-stay-scrolled';
import Message from './message.jsx';

class Messages extends Component {
  state = {
    notifyNewMessage: false
  }

  onStayScrolled = (isScrolled) => {
    // Tell the user to scroll down to see the newest messages if the element wasn't scrolled down
    this.setState({ notifyNewMessage: !isScrolled });
  }

  onScrolled = () => {
    // The element just scrolled down - remove new messages notification, if any
    this.setState({ notifyNewMessage: false });
  }

  render() {
    const { messages } = this.props;
    const { notifyNewMessage } = this.state;

    return (
      <div>
        <StayScrolled
          component="div"
          onStayScrolled={this.onStayScrolled}
          onScrolled={this.onScrolled}
        >
        {
          messages.map(
            (message, i) => <Message key={i} text={message} />
          )
        }
        </StayScrolled>
        { notifyNewMessage && <div>Scroll down to new message</div> }
      </div>
    );
  }
}

const easing = 'linear';
const duration = 100;

const dynamicsRunScroll = (dom, offset) => {
  dynamics.animate(dom, {
    scrollTop: offset,
  }, {
    type: dynamics[easing],
    duration,
  });
};

const jqueryRunScroll = (dom, offset) => {
  jQuery(dom).animate({ scrollTop: offset }, duration, easing);
};

const velocityRunScroll = (dom, offset) => {
  Velocity(
    dom.firstChild,
    'scroll',
    {
      container: dom,
      easing,
      duration,
      offset,
    }
  );
};