usePageLeave

React sensor hook that tracks when mouse leaves the page

usePageLeave detects when the user’s mouse cursor leaves the page viewport by listening to the mouseout event on document. It returns a boolean that is true when the cursor is outside the page and false when inside. This is commonly used to trigger exit-intent actions.

When to Use

  • Showing exit-intent popups or special offers when the user moves the cursor toward the browser’s close button or address bar
  • Pausing animations or media when the user’s attention appears to be leaving the page
  • Triggering auto-save or state preservation when the user seems about to navigate away

Notes

  • SSR-safe: Returns false during server-side rendering. No document event listeners are attached on the server.
  • Mouse only: This hook tracks mouse cursor position, so it does not detect page leave on touch-only devices. For detecting when the user switches tabs, see the document.visibilitychange event.
  • Related hooks: See also useIdle for detecting user inactivity within the page.

Usage

Live Editor
function Demo() {
  const isLeft = usePageLeave();

  return <div>isLeft: {JSON.stringify(isLeft)}</div>;
};
Result

API

usePageLeave

Returns

boolean: whether the mouse leave page

Arguments