HotkeysProvider | TanStack Hotkeys React Docs

function HotkeysProvider<T>(__namedParameters): Element;

function HotkeysProvider<T>(__namedParameters): Element;

Defined in: HotkeysProvider.tsx:107

Provides default options, app hotkeys, and the user's custom hotkeys.

Nest providers to create hotkey scopes. A nested provider inherits app hotkeys and merges default options. With scope, its hotkeys fire only while it is mounted and enabled; with exclusive, only its hotkeys fire.

Type Parameters

T

T extends Readonly<Record<string, AppHotkey<string, HotkeyChord | HotkeySequence | null>>> = Readonly<Record<string, AppHotkey<string, HotkeyChord | HotkeySequence | null>>>

Parameters

__namedParameters

HotkeysProviderProps<T>

Returns

Element

Examples

tsx

<HotkeysProvider
  appHotkeys={appHotkeys}
  customHotkeys={JSON.parse(localStorage.getItem('hotkeys') ?? '{}')}
  onCustomHotkeysChange={(custom) =>
    localStorage.setItem('hotkeys', JSON.stringify(custom))
  }
>
  <App />
</HotkeysProvider>

<HotkeysProvider
  appHotkeys={appHotkeys}
  customHotkeys={JSON.parse(localStorage.getItem('hotkeys') ?? '{}')}
  onCustomHotkeysChange={(custom) =>
    localStorage.setItem('hotkeys', JSON.stringify(custom))
  }
>
  <App />
</HotkeysProvider>

tsx

function EditDialog() {
  return (
    <HotkeysProvider scope="edit-dialog" exclusive={{ allow: ['global'] }}>
      <DialogBody />
    </HotkeysProvider>
  )
}

function EditDialog() {
  return (
    <HotkeysProvider scope="edit-dialog" exclusive={{ allow: ['global'] }}>
      <DialogBody />
    </HotkeysProvider>
  )
}