useIdle

跟蹤頁面上的用戶是否處於空閒狀態。

useIdle 透過監聽 mousemove、mousedown、keydown、touchstart、resize 和 wheel 等 DOM 事件來偵測使用者閒置狀態。它回傳一個布林值，指示使用者是否已閒置超過指定時間（預設：60 秒）。你可以自訂逾時時間、初始狀態和重置閒置計時器的事件。

使用場景

• 當使用者離開時自動儲存草稿或暫停耗費資源的操作
• 為安全敏感的應用程式顯示「你還在嗎？」提示
• 在一段時間不活動後調暗 UI 或暫停媒體播放

注意事項

• SSR 安全：在伺服器端渲染時回傳 initialState 值（預設：false）。伺服器上不會附加事件監聽器。
• 可設定事件：預設情況下，此 hook 監聽 window 上的滑鼠、鍵盤、觸控、調整大小和滾輪事件。你可以透過 events 參數覆寫事件清單。
• 相關 hooks：另請參閱 usePageLeave 用於偵測游標離開頁面視窗。

Usage

function Demo() {
  const isIdle = useIdle(3e3);

  return (
    <div>
      <div>用戶是否空闒：{isIdle ? "是的 😴" : "不是"}</div>
    </div>
  );
};

API

UseIdle

Returns

boolean: 是否處於空閒

Arguments