---
title: "useIdle 用法與示例"
description: "跟蹤頁面上的用戶是否處於空閒狀態。"
canonical: https://reactuse.com/zh-Hant/browser/useidle/
---

# useIdle

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

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

### 使用場景

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

### 注意事項

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

## Usage

```tsx live

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

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

```

%%API%%