DEV Community

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

Posted on

3

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

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay