[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

 

 

<iframe height="240" src="https://codesandbox.io/embed/n3v55081l4" style="width: 100%; height: 500px; border: 0; border-radius: 4px; overflow: hidden;" width="320"></iframe>

上一篇:10行代码判断上传文件的格式


下一篇:如果字符串包含html代码,如何用python检测?