React中的 usessleep钩子

Question

我正在用React构建一个kiosk显示应用程序，并且在没有鼠标/触摸/键盘事件发生的一定时间后，我希望我的组件调用一些函数goToSleep()。有没有人知道useSleep()的钩子看起来像这样使用:

const MyApp = (): JSX.Element => {
const sleepConfig = {
timer: 100000 //after 100000ms call the function
}
const setSleepMode = () =>{console.log("setting to sleep mode")}
const sleepEvent = useSleep(setSleepMode(), sleepConfig)
return <div {...sleepEvent}>BODY</div>
};

Answer 1

react-use有一个useIdle钩子来实现这个:

import {useIdle} from 'react-use';
const Demo = () => {
const isIdle = useIdle(3e3);
return (
<div>
<div>User is idle: {isIdle ? 'Yes 😴' : 'Nope'}</div>
</div>
);
};