onPrompt fires continuously if timeout & promptBeforeIdle are the same value

[RJWerning]

Bug information

Affected Module

useIdleTimer

• Version: v5.6.0

Describe the bug

If you set timeout and promptBeforeIdle to the same value (eg. 60000), the onPrompt event will trigger continuously.

To Reproduce

Steps to reproduce the behavior:

when calling useIdleTimer, assign the same value (or const) to the timeout and promptBeforeIdle properties.

Expected behavior

It should allow the same values to be used - eg. 60000 and 60000

Screenshots

const { getRemainingTime, activate } = useIdleTimer({
onIdle: () => setIsOpen(false),
onActive: () => setIsOpen(false),
onPrompt: () => {
console.log("onPrompt");
setIsOpen(true);
},
timeout: 60000,
promptBeforeIdle: 60000,
throttle: 500
});

System Information (please complete the following information)

• OS: Windows 10
• Device: [e.g. iPhone6, Desktop]
• Browser Vendor: chrome & edge
• Browser Version: [e.g. 75]

Additional context

Add any other context about the problem here.

Code sample:

app.js

export default function App() {
  const { IdleModal, modalProps } = useIdleTimerModal({ timeout: 30000 });
  // console.log("modalProps", modalProps.isOpen);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <IdleModal {...modalProps} />
    </div>
  );
}

useIdleTimerModal.js

import React, { useEffect, useState } from "react";
import { useIdleTimer } from "react-idle-timer";
import Modal from "react-modal";
const customStyles = {
  content: {
    top: "50%",
    left: "50%",
    right: "auto",
    bottom: "auto",
    marginRight: "-50%",
    transform: "translate(-50%, -50%)"
  }
};

const IdleModal = ({ isOpen, remaining, handleLogout, handleStillActive }) => {
  return (
    <div>
      <Modal
        isOpen={isOpen}
        onRequestClose={handleLogout}
        style={customStyles}
        contentLabel="Example Modal"
      >
        <h3>Are you still here?</h3>
        <p>Logging out in {remaining} seconds</p>
        <button onClick={handleStillActive}>Im still here</button>
      </Modal>
    </div>
  );
};

export const useIdleTimerModal = ({ timeout }) => {
  const MODAL_TIMEOUT = 10000;
  const [isOpen, setIsOpen] = useState(false);
  const [remaining, setRemaining] = useState(0);
  console.log("useIdleTimerModal", timeout, isOpen);

  const { getRemainingTime, activate } = useIdleTimer({
    onIdle: () => setIsOpen(false),
    onActive: () => setIsOpen(false),
    onPrompt: () => {
      console.log("onPrompt");
      setIsOpen(true);
    },
    timeout: 60000,
    promptBeforeIdle: 60000,
    throttle: 500
  });

  const timeLeft = Math.ceil(getRemainingTime() / 1000);
  console.log("timeLeft", timeLeft);

  useEffect(() => {
    let interval = null;
    if (isOpen) {
      interval = setInterval(() => {
        setRemaining(timeLeft);
      }, 1000);
    } else if (!isOpen && remaining !== 0) {
      setRemaining(0);
      clearInterval(interval);
    }
    return () => clearInterval(interval);
  }, [isOpen, remaining, timeLeft]);

  const modalProps = {
    isOpen,
    remaining,
    handleLogout: () => {
      console.log("handleLogout");
      setIsOpen(false);
    },
    handleStillActive: () => {
      console.log("handleStillActive");
      activate();
      setIsOpen(false);
    }
  };

  return { modalProps, IdleModal };
};

[SupremeTechnopriest]

It will now throw an error when promptBeforeIdle >= timeout. You should never hit this when configured correctly, but safety is nice.

[SupremeTechnopriest]

Published as 5.6.1.

[RJWerning]

It will now throw an error when promptBeforeIdle >= timeout. You should never hit this when configured correctly, but safety is nice.

I understand what you mean by 'configured correctly', but when I checked the docs at idletimer.dev, there is nothing there that mentions that timeout must be > promptBeforeIdle, and the demo on the main page allows for idle > timeout and it seems to work correctly there. Which is why I raised the issue, it seems like the issue may be in the wrapper.

[SupremeTechnopriest]

Yeah it was definitely an oversight on my part. I will expand the documentation a bit more on the next release.