HotkeysProvider

The HotkeysProvider component is a wrapper component that allows you to group hotkeys together. This is useful if you want to disable a group of hotkeys in a certain part of your application.

In order to use the grouping feature, you need to wrap your application with the HotkeysProvider component.

import { HotkeysProvider } from 'react-hotkeys-hook';

function App() {
  return (
    <HotkeysProvider>
      <div>
        <h1>My App</h1>
      </div>
    </HotkeysProvider>
  )
}

Grouping works by passing setting the scope option of a hotkey.

import { useHotkeys } from 'react-hotkeys-hook';

function MyComponent() {
  useHotkeys('ctrl+a', () => console.log('ctrl+a'), { scopes: 'scopeA' })
  useHotkeys('ctrl+b', () => console.log('ctrl+b'), { scopes: 'scopeB' })
  useHotkeys('ctrl+c', () => console.log('ctrl+c'), { scopes: 'scopeA' })

  return (
    <div>
      <h1>My App</h1>
    </div>
  )
}

By default all hotkeys are in the * (wildcard) scope. This means that they will be active regardless of where you are in your application. Wrapping your app with the <HotkeysProvider> component will enable the wildcard scope by default.

If you set a scope on a hotkey, it will not be part of the wildcard scope anymore.

Activating and deactivating scopes

You can enable and disable scopes by using the useHotkeysContext hook.

import { useHotkeysContext } from 'react-hotkeys-hook';

function MyComponent() {
  const { enableScope, disableScope } = useHotkeysContext();

  return (
    <div>
      <button onClick={() => enableScope('scopeA')}>Enable scope A</button>
      <button onClick={() => disableScope('scopeA')}>Disable scope A</button>
    </div>
  )
}

You can also toggle scopes by using the toggleScope function.

Get currently active scopes

If your app is highly dynamic and you want to know which scopes are currently active, you can get an array of string via enabledScopes from the context.

Set initially active scopes

You can set the initially active scopes by passing an array of strings to the initiallyActiveScopes prop of the HotkeysProvider.

import { HotkeysProvider } from 'react-hotkeys-hook';

function App() {
  return (
    <HotkeysProvider initiallyActiveScopes={['scopeA']}>
      <div>
        <h1>My App</h1>
      </div>
    </HotkeysProvider>
  )
}

Wildcard scope when using initiallyActiveScopes

If you set the initiallyActiveScopes prop, the wildcard scope will not be active by default. You would have to set ['scopeA', '*'].