https://github.com/emasuriano/react-hotkey-tooltip

A global Hotkey provider with built in tooltip for React
https://github.com/emasuriano/react-hotkey-tooltip

hotkey hotkeys keyboard-shortcuts mousetrap react react-component shortcut tooltip

Last synced: 6 months ago
JSON representation

A global Hotkey provider with built in tooltip for React

• Host: GitHub
• URL: https://github.com/emasuriano/react-hotkey-tooltip
• Owner: EmaSuriano
• License: mit
• Created: 2018-02-02T18:07:22.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2025-04-01T12:58:13.000Z (6 months ago)
• Last Synced: 2025-04-02T09:08:23.103Z (6 months ago)
• Topics: hotkey, hotkeys, keyboard-shortcuts, mousetrap, react, react-component, shortcut, tooltip
• Language: TypeScript
• Homepage: https://react-hotkey-tooltip-storybook.netlify.app
• Size: 18.2 MB
• Stars: 34
• Watchers: 2
• Forks: 10
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md
  • Security: SECURITY.md

Awesome Lists containing this project

README

          
# React Hotkey Tooltip

[![Master](https://github.com/EmaSuriano/react-hotkey-tooltip/actions/workflows/master.yml/badge.svg)](https://github.com/EmaSuriano/react-hotkey-tooltip/actions/workflows/master.yml)

[![npm version](https://badge.fury.io/js/react-hotkey-tooltip.svg)](https://badge.fury.io/js/react-hotkey-tooltip)

[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)

[![Netlify Status](https://api.netlify.com/api/v1/badges/d8820ba2-2f51-4aa9-be7a-b11e6b7b65ae/deploy-status)](https://app.netlify.com/sites/react-hotkey-tooltip-storybook/deploys)



  

    

  





  A global Hotkey provider with built in tooltip for React



## [Docs 📚](https://react-hotkey-tooltip-storybook.netlify.app)

## 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 accessible 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](https://github.com/ccampbell/mousetrap): to bind and unbind Hotkeys globally 🌐

- [@tippyjs/react](https://github.com/atomiks/tippyjs-react): to display beautiful Tooltips 😄

## Installation

You can the package manager you want:

```bash

# npm

$ npm install react-hotkey-tooltip

# yarn

$ yarn add react-hotkey-tooltip

```

## Example

```javascript

import React from 'react';

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

const ClickableButtonByPressingA = () => (

  

    

       alert('You have clicked me!')}>

        Click me using your keyboard!

      

    

  

);

```

For more examples please consider checking the [Docs](https://react-hotkey-tooltip-storybook.netlify.app) section.

## License

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