zoukankan      html  css  js  c++  java
  • [React] Detect user activity with a custom useIdle React Hook

    If the user hasn't used your application for a few minutes, you may want to log them out of the application automatically in case they've stepped away from the machine and someone nefarious attempts to use their session. Let's checkout how you can create a custom React hook that wraps a regular npm module called activity-detector to solve this problem.

    import React from "react";
    import ReactDOM from "react-dom";
    import createActivityDetector from "activity-detector";
    
    import "./styles.css";
    
    function useIdle(options) {
      const [isIdle, setIsIdle] = React.useState(false);
      React.useEffect(() => {
        const activityDetector = createActivityDetector(options);
        activityDetector.on("idle", () => setIsIdle(true));
        activityDetector.on("active", () => setIsIdle(false));
    
        // clean the subscription
        return () => {
          activityDetector.stop();
        };
      });
      return isIdle;
    }
    
    function App() {
      const isIdle = useIdle({ timeToIdle: 1000 });
      return (
        <div className="App">
          {!isIdle ? <div>Hello World</div> : <div>Are you there?</div>}
        </div>
      );
    }
    
    const rootElement = document.getElementById("root");
    ReactDOM.render(<App />, rootElement);

    UseEffect

  • 相关阅读:
    python调用函数
    python递归函数的执行过程
    linux rwx 权限说明
    linux ssh scp免密码
    linux的bash特性
    python3常用的内置函数
    linux清理系统缓存
    vim常用命令
    公司项目安装禅道
    jquery 自定义动画
  • 原文地址:https://www.cnblogs.com/Answer1215/p/10354958.html
Copyright © 2011-2022 走看看