Wondering what’s next for npm?Check out our public roadmap! »

    react-hotkey-tooltip

    3.1.0 • Public • Published

    React Hotkey Tooltip

    Build npm version prettier semantic-release

    A global Hotkey provider with built in tooltip for React

    Docs 📚

    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!

    Installation

    You can the package manager you want:

    # npm
    $ npm install react-hotkey-tooltip
    
    # yarn
    $ yarn add react-hotkey-tooltip

    Example

    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.

    License

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

    Install

    npm i react-hotkey-tooltip

    DownloadsWeekly Downloads

    5

    Version

    3.1.0

    License

    MIT

    Unpacked Size

    6.06 kB

    Total Files

    3

    Last publish

    Collaborators

    • avatar