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.
perrin4869 / react-stay-scrolled / examples / src / main.jsx View on Github 
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) => <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) => <div>{`${text} ${i}`}</div>)}</div>react-stay-scrolled
React component to keep content always scrolled down
