Skip to content
A global Hotkey provider with built in tooltip for React
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
doc Bump docz and change documentation structure Dec 28, 2018
.eslintrc.js Add final version of documentatioN Jul 19, 2018
LICENSE doc(README): fix typo Apr 15, 2019
package.json chore(package): update eslint to version 5.14.0 Feb 15, 2019

React Hotkey Tooltip

Greenkeeper badge Travis badge npm version Coverage Status eslint code style: prettier

A global Hotkey provider with built in tooltip for React


Why you should use it?

When working with hotkeys in a React application we will find many problems when trying to implement it:

  • Hotkeys are only accesible inside a specific component (not globally).
  • Must take care of the hotkeys manually throughout the life cycle.
  • Have to provide a way so the user can see all the hotkeys on the screen.

This library will help you by declaring global hotkeys that automatically will be updated by any life cycle of the component and show a tooltip by pressing a combination of keys

Built with

Why mess up with document.addEventListener or positioning/styling tooltips if there are a lot of open source libraries that can do that for me. These are the chosen ones!

  • mousetrap: to bind and unbind hotkeys globally 🌐
  • react-tippy: to display beautiful tooltips 😄


The library is available as a package in npm and yarn, so use the one you prefer.

# npm
$ npm install react-hotkey-toolip

# yarn
$ yarn add react-hotkey-tooltip


import React from 'react';
import { Hotkey, HotkeyProvider } from 'react-hotkey-tooltip';

const ClickableButtonByPressingA = () => (
    <Hotkey combination="a" onPress="click">
      <button onClick={() => alert('You have clicked me!')}>
        Click me using your keyboard!


MIT. Also check react-tippy.js' and mousetrap' license.

You can’t perform that action at this time.