useExitIntent
🐠 A React Hook to handle exit intent strategies
yarn add use-exit-intentSimple to use
The Exit Intent strategy is a great way to increase your conversion rate. That strategy is commonly used to show a modal/popup when the user is about to leave your website.
useExitIntent hook is simple to use and you can customize it to your needs. Just import it and call it in your component as in the example on the right. Here are the main features:
import { useExitIntent } from 'use-exit-intent'
export default function App() {
const { unsubscribe, registerHandler } = useExitIntent()
registerHandler({
id: 'openModal',
handler: () => console.log('First handler')
})
registerHandler({
id: 'anotherHandler',
handler: () => console.log('Another handler'),
context: ['onUnsubscribe', 'onMobile']
})
const handleUnsubscription = () => unsubscribe()
// ...
}
Playground
These are the settings available in the useExitIntent hook, you can play around with them in the right panes and these changes will be reflected in the exit intent modal on this page
{
"cookie": {
"daysToExpire": 30,
"key": "use-exit-intent"
},
"desktop": {
"triggerOnIdle": false,
"useBeforeUnload": false,
"triggerOnMouseLeave": true,
"delayInSecondsToTrigger": 1
},
"mobile": {
"triggerOnIdle": true,
"delayInSecondsToTrigger": 1
}
}