usePageLeave

Detect when the user's mouse cursor leaves the browser tab boundaries.

Retention Utility

Exit Intent Guard

Detect when users are about to leave your page.

🖱️

Move your cursor outside the browser window

Try moving it towards the tabs or address bar.

Detection Count0

Usage

import { usePageLeave } from 'usehooks-ts'
 
export default function App() {
  usePageLeave(() => {
    console.log('User is leaving the page!')
  })
 
  return <p>Move your mouse out of the browser window to trigger.</p>
}

API

usePageLeave(onLeave)

Parameters

NameTypeDescription
onLeave() => voidFunction to execute when user leaves

Hook

import { useEffect } from 'react'
 
export function usePageLeave(onLeave: () => void) {
  useEffect(() => {
    const handleMouseOut = (event: MouseEvent) => {
      const from = event.relatedTarget || (event as any).toElement
      if (!from || (from as any).nodeName === 'HTML') {
        onLeave()
      }
    }
 
    document.addEventListener('mouseout', handleMouseOut)
    return () => document.removeEventListener('mouseout', handleMouseOut)
  }, [onLeave])
}