// Detect when the user's cursor leaves the page (exit-intent)
const { hasLeft, triggerPageLeave } = usePageLeave({ onPageLeave: showModal });Ideal for displaying exit-intent popups, feedback forms, discount offers, or tracking user engagement patterns.
Try this:
• Move your mouse to the very top of the browser window and then outside
• Switch to another tab or minimize the browser
• Use Alt+Tab to switch to another application
Perfect for exit-intent popups and user engagement tracking!
import { usePageLeave } from '@usegrand/react-hokss';
function ExitIntentModal() {
const { hasLeft, resetPageLeave, isVisible } = usePageLeave({
onPageLeave: () => {
setShowModal(true);
},
sensitivity: 10,
trackMouseLeave: true,
trackVisibilityChange: true
});
return (
<div>
<p>User status: {hasLeft ? 'Left' : 'On page'}</p>
<p>Page visibility: {isVisible ? 'Visible' : 'Hidden'}</p>
<button onClick={resetPageLeave}>Reset</button>
</div>
);
}Configuration options for page leave detection
Callback function executed when user leaves the page
Sensitivity threshold in pixels from top (default: 10)
Delay before considering user left in ms (default: 0)
Whether to track mouse leave events (default: true)
Whether to track visibility changes (default: true)
Whether to track beforeunload events (default: true)
Object containing page leave state and controls
Boolean indicating if user has left the page
Function to manually trigger page leave detection
Function to reset the page leave state
Boolean indicating if page is currently visible
Date of last page leave event