DEV Community

Cover image for useExitIntent - A React Hook to handle exit intent strategies
Dalton Menezes
Dalton Menezes

Posted on

useExitIntent - A React Hook to handle exit intent strategies

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. Here are the main features:

  • 🚀 Multiple handlers can be registred
  • 🔥 Highly configurable
  • 🧠 Different strategies for Desktop and Mobile
  • ⛔️ Unsubscription support with cookies
  • 🎉 Built with TypeScript

Installation

yarn

yarn add use-exit-intent
Enter fullscreen mode Exit fullscreen mode

npm

npm i use-exit-intent
Enter fullscreen mode Exit fullscreen mode

Importing

import { useExitIntent } from 'use-exit-intent'
Enter fullscreen mode Exit fullscreen mode

Using

In your React component:

export function App() {
  const { registerHandler } = useExitIntent()

  registerHandler({
    id: 'openModal',
    handler: () => console.log('Hello from handler!')
  })

  // ...
}
Enter fullscreen mode Exit fullscreen mode

To get more knowledge about this hook:

Top comments (1)

Collapse
 
dovraneminov profile image
Dovran Eminov

interesting feature, I decided to use it. The only thing that creates inconvenience in use is that if the client accidentally points to the exit, a modal window immediately opens, even though he set the value in seconds.
overall a cool package and quick to use