DocsCloud UI HooksusePageLeave

usePageLeave

Detect when the mouse leaves the page.

Import

import { usePageLeave } from '@tidbcloud/uikit'

Usage

usePageLeave calls the given function when the mouse leaves the page.

import { useState } from 'react'
import { usePageLeave } from '@tidbcloud/uikit'
import { Text } from '@tidbcloud/uikit'
 
function Demo() {
  const [leftCount, setLeftCount] = useState(0)
 
  usePageLeave(() => {
    setLeftCount((c) => c + 1)
  })
 
  return <Text>Mouse has left the page {leftCount} times</Text>
}

Use Cases

  • Show exit intent popups
  • Pause content when user is not on page
  • Track user engagement

Definition

function usePageLeave(onPageLeave: () => void): void
useOsuseTextSelection