AppHotkeysProvider

function AppHotkeysProvider<T>(props): ReactElement;

Defined in: AppHotkeysProvider.tsx:44

A HotkeysProvider that also loads the store for app hotkeys, so a React Server Component, such as a Next.js app/layout.tsx, can render it with appHotkeys from a server module. HotkeysProvider loads the store only where defineAppHotkeys ran, which keeps it out of bundles without app hotkeys.

Functions can't come from a server component, such as onCustomHotkeysChange or a function in the meta of a declaration. To pass one, render this provider from a client component.

Type Parameters#

T#

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

Parameters#

props#

AppHotkeysProviderProps<T>

Returns#

ReactElement

Example#

// app/layout.tsx, a server component
import { AppHotkeysProvider } from '@tanstack/react-hotkeys'
import { appHotkeys } from './app-hotkeys'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <AppHotkeysProvider appHotkeys={appHotkeys}>{children}</AppHotkeysProvider>
      </body>
    </html>
  )
}