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 (0)

Dream Big


Use any Linode offering to create something unique or silly in the DEV x Linode Hackathon 2022 and win the Wacky Wildcard category.

β†’ Join the Hackathon <-