---
title: usePageLeave
description: "Reactively detects when the mouse cursor leaves the page. Useful for showing exit-intent popups, saving progress, or pausing animations when the user moves their cursor outside the browser viewport."
category: Sensors
sidebar:
  order: 10
type-table:
  import: "@usels/web"
  name: "UsePageLeave"
  params:
    children:
      - UsePageLeaveOptions
---

## Demo

## Usage

<CodeTabs>
  <Fragment slot="hook">
    ```tsx twoslash
    // @noErrors
    import { usePageLeave } from "@usels/web";

    function PageLeaveDetector() {
      const isLeft$ = usePageLeave();

      return <p>Mouse left the page: {isLeft$.get() ? "Yes" : "No"}</p>;
    }
    ```

  </Fragment>
  <Fragment slot="scope">
    ```tsx
    import { createPageLeave } from "@usels/web";

    function PageLeaveDetector() {
      "use scope"
      const isLeft$ = createPageLeave();

      return <p>Mouse left the page: {isLeft$.get() ? "Yes" : "No"}</p>;
    }
    ```

  </Fragment>
</CodeTabs>