Sensors

usePageLeave

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.

Demo

Page Leave

On Page

Move your mouse outside the browser window to detect page leave.

Mouse is on the page

import { 
const usePageLeave: (options?: DeepMaybeObservable<UsePageLeaveOptions>) => ReadonlyObservable<boolean>
usePageLeave } from "@usels/web";

function 
function PageLeaveDetector(): JSX.Element
PageLeaveDetector() {
  const 
const isLeft$: any
isLeft$ = 
function usePageLeave(options?: DeepMaybeObservable<UsePageLeaveOptions>): ReadonlyObservable<boolean>
Framework-agnostic reactive page-leave detector.
Returns an Observable<boolean> that is true while the mouse cursor is
outside the page (document) and false otherwise. Listens to mouseout on
the window plus mouseleave / mouseenter on the document. The target
window is resolved via resolveWindowSource, so options.window (plain,
Ref$, or Observable) is honored reactively.
usePageLeave();

  return <
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>Mouse left the page: {
const isLeft$: any
isLeft$.
any
get() ? "Yes" : "No"}</
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>;
}

import { createPageLeave } from "@usels/web";

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

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

Type

Parameters

Parameter	Type	Description
`options`	`ConfigurableWindow` (optional)	-

UsePageLeaveOptions

Option	Type	Default	Description
`window`	`WindowSource`	`-`	-

Returns

ReadonlyObservable<boolean>

Source

View on GitHub