How to use react-stay-scrolled - 6 common examples

const App = () => {
  const divRef = useRef(null);
  const { stayScrolled } = useStayScrolled(divRef);
  const [messages, setMessages] = useState(initialMessages);

  useInterval(() => {
    setMessages((prevMessages) => prevMessages.concat([message]));
  }, 500);

  useLayoutEffect(() => {
    stayScrolled();
  }, [messages]);

  return (
    <div style="{style}">
      {/* eslint-disable-next-line react/no-array-index-key */}
      {messages.map(({ text }, i) =&gt; <div>{`${text} ${i}`}</div>)}
    </div>
  );

export default (props) => {
  const divRef = useRef(null);
  const intervalRef = useRef(null);
  const { stayScrolled } = useStayScrolled(divRef);
  const [messages, setMessages] = useState(initialMessages);

  useEffect(() => {
    intervalRef.current = setInterval(() => {
      setMessages(prevMessages => prevMessages.concat([message]));
    }, 500);
  }, []);

  useLayoutEffect(() => {
    stayScrolled();
  }, [messages]);

  return (
    <div>
      {/* eslint-disable-next-line react/no-array-index-key */}
      {messages.map(({ text }, i) =&gt; <div>{`${text} ${i}`}</div>)}</div>

stayScrolled: PropTypes.func.isRequired,
  }

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

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

    return <div>{text}</div>;
  }
}

export default scrolled(Message);

))}
      
    );
  }
}

Storyline.propTypes = {
  storyline: arrayOf(object)
};

Storyline.defaultProps = {
  storyline: []
};

export default scrolled(Storyline);

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

class Log extends Component {
  render() {
    return <div>{this.props.message.toLowerCase()}</div>;
  }
}

Log.propTypes = {
  scrollBottom: PropTypes.func,
  message: PropTypes.string,
};

export default scrolled(Log);

};

class Log extends Component {
  componentDidMount() {
    const { stayScrolled } = this.props;
    stayScrolled();
  }

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

    return <pre>{log}</pre>;
  }
}

export default scrolled(Log);