A global Hotkey provider with built in tooltip for React
MIT License
When working with Hotkeys in a React application we will find many problems when trying to implement it:
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 ✨
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!
You can the package manager you want:
# npm
$ npm install react-hotkey-tooltip
# yarn
$ yarn add react-hotkey-tooltip
import React from 'react';
import { Hotkey, HotkeyProvider } from 'react-hotkey-tooltip';
const ClickableButtonByPressingA = () => (
<HotkeyProvider>
<Hotkey combination="a" onPress="click">
<button onClick={() => alert('You have clicked me!')}>
Click me using your keyboard!
</button>
</Hotkey>
</HotkeyProvider>
);
For more examples please consider checking the Docs section.
MIT. Also check react-tippy.js
' and mousetrap
' license.