[React] Detect user activity with a custom useIdle React Hook

Posted 2021-02-08 answer1215

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