How to use use-interval - 3 common examples
To help you get started, we’ve selected a few use-interval 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>
);
};children,
}: TogglrProps) => {
const [shown, setShown] = React.useState(false);
const [interacted, setInteracted] = React.useState(false);
const [inView, setRef] = useIsInViewport({});
const state = useVisible();
const set = (value: any) => {
setInteracted(true);
setShown(value);
};
const toggle = (value?: any) => {
setInteracted(true);
setShown((prevVal: any) => (prevVal ? false : value || true));
};
useInterval(() => {
if (!interval || interacted || !inView || state.hidden) {
return;
}
const result = onIntervalSet(shown);
setShown((prevVal: any) => (result !== undefined ? result : !prevVal));
}, intervalMs);
return (
<>
<div>
{children({
toggle,
set,
shown,
})}</div>const useForexInterval = fn => useInterval(fn, INTERVAL, true)use-interval
React hook for setting an interval as posted on overreacted.io
