🔑 Easily map window listeners to keyboard events in React

useKey is a custom React hook, so you're project must be running React and ReactDOM versions 16.8+.

To install, use your package manager of choice. Here is the command for npm:

npm i usekey-event-manager

Import useKey from usekey-event-manager and pass it a keyboard event map:

import React from 'react'
import useKey from 'usekey-event-manager'

function Dialog(props) {
    useKey({ Escape: props.closeAndReturnFocus })
    return(
        <div role="alertdialog">
            {/* ... */}
        </div>
    )
}

export default Dialog

Version 1+ of usekey-event-manager comprises a single export: useKey.

useKey is a custom React hook that assigns a window event listener on keydown. When an event is fired, the listener compares it to a set of selected keys, then calls the action and passes the event object if there is a match.

useKey(Object<String, Function>)

If there is a single key that you want to listen for, you can pass a map like so:

useKey({ Escape: close })

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

Sean McPherson

MIT