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

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);