React Hotkey Manager

Global Hotkeys for React

React Hotkey Manager is a Context Provider/Consumer that allows registering and unregistering global hotkeys by rendering (and later unmounting) a react component. e.g. if Component A contains Hotkeys, those hotkeys will be registered if and only if Component A is currently rendered.

Installation

npm install react-hotkey-manager

Usage

import { HotkeyManager, Hotkeys } from "react-hotkey-manager";

<SomewhereNearTheTopOfYourReactStack>
    <HotkeyManager>
        <StuffInTheMiddle>
            <Hotkeys
                keys={{
                    "esc": {
                        callback: () => console.log("ESC pressed in StuffInTheMiddle"),
                    },
                }}
            />
        </StuffInTheMiddle>
        <OtherStuff>
            <Hotkeys
                keys={{
                    "esc": {
                        callback: () => console.log("ESC pressed in OtherStuff"),
                    },
                    "ctrl+c": {
                        callback: () => console.log("ctrl+c pressed");
                    }
                }}
            />
        </OtherStuff>
    </HotkeyManager>
</SomewhereNearTheTopOfYourReactStack>

Development setup

npm install
npm test

Release History

• 0.1.0
  • Initial public release

Meta

Kevan Davis [email protected]

Distributed under the BSD license.

https://github.com/kmdavis/react-hotkey-manager

Contributing

1. Fork it (https://github.com/kmdavis/react-hotkey-manager/fork)
2. Create your feature branch (git checkout -b feature/fooBar)
3. Commit your changes (git commit -am 'Add some fooBar')
4. Push to the branch (git push origin feature/fooBar)
5. Create a new Pull Request