Learn React Hooks

The useHover Hook

In order to know whether the user is currently hovering over an element, we can use the useHover Hook, as follows:

1. First, we import the useHover Hook:

import React from 'react'import { useHover } from 'react-hookedup'

2. Then, we define our component and the Hover Hook, which returns the hovered value and a bind function, to bind the Hook to an element:

export default function UseHover () {    const { hovered, bind } = useHover()

3. Finally, we render an element, and bind the Hover Hook to it:

    return (        <div {...bind}>Hover me {hovered && 'THANKS!!!'}</div>    )}

As we can see, the Hover Hook makes it much easier to handle hover events. There is no need to define our own handler functions anymore.