How to use the react-stay-scrolled function in react-stay-scrolled

To help you get started, we’ve selected a few react-stay-scrolled examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github perrin4869 / react-stay-scrolled / examples / src / main.jsx View on Github external
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>
  );
github perrin4869 / react-stay-scrolled / examples / src / messages.jsx View on Github external
export default (props) =&gt; {
  const divRef = useRef(null);
  const intervalRef = useRef(null);
  const { stayScrolled } = useStayScrolled(divRef);
  const [messages, setMessages] = useState(initialMessages);

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

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

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

react-stay-scrolled

React component to keep content always scrolled down

MIT
Latest version published 2 months ago

Package Health Score

79 / 100
Full package analysis

Popular react-stay-scrolled functions