Learn React Hooks

The useFocus Hook

In order to know whether an element is currently focused, we can use the useFocus Hook as follows:

1. First, we import the useFocus Hook:

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

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

export default function UseFocus () {    const { focused, bind } = useFocus()

3. Finally, we render an input field, and bind the Focus Hook to it:

    return (        <div>            <input {...bind} value={focused ? 'focused' : 'not focused'} />        </div>    )}

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