HotkeysProvider | TanStack Hotkeys Vue Docs

const HotkeysProvider: DefineComponent<ExtractPropTypes<{
  appHotkeys: {
     default: undefined;
     type: PropType<Readonly<Record<string, AppHotkey<string, HotkeyChord | HotkeySequence | null>>>>;
  };
  customHotkeys: {
     default: undefined;
     type: PropType<
        | CustomHotkeys<Readonly<Record<string, AppHotkey<string, ... | ... | ...>>>>
       | null>;
  };
  defaultOptions: {
     default: undefined;
     type: PropType<HotkeysProviderOptions>;
  };
  enabled: {
     default: boolean;
     type: BooleanConstructor;
  };
  exclusive: {
     default: boolean;
     type: PropType<
        | boolean
        | {
      }
       | undefined>;
  };
  scope: {
     default: undefined;
     type: StringConstructor;
  };
}>, () => 
  | VNode<RendererNode, RendererElement, {
[key: string]: any;
}>[]
  | undefined, {
}, {
}, {
}, ComponentOptionsMixin, ComponentOptionsMixin, {
  customHotkeysChange: (_customHotkeys) => true;
}, string, PublicProps, ToResolvedProps<ExtractPropTypes<{
  appHotkeys: {
     default: undefined;
     type: PropType<Readonly<Record<string, AppHotkey<string, HotkeyChord | HotkeySequence | null>>>>;
  };
  customHotkeys: {
     default: undefined;
     type: PropType<
        | CustomHotkeys<Readonly<Record<string, AppHotkey<..., ...>>>>
       | null>;
  };
  defaultOptions: {
     default: undefined;
     type: PropType<HotkeysProviderOptions>;
  };
  enabled: {
     default: boolean;
     type: BooleanConstructor;
  };
  exclusive: {
     default: boolean;
     type: PropType<
        | boolean
        | {
      }
       | undefined>;
  };
  scope: {
     default: undefined;
     type: StringConstructor;
  };
}>, {
  customHotkeysChange: (_customHotkeys) => true;
}>, {
  appHotkeys: Readonly<Record<string, AppHotkey<string, HotkeyChord | HotkeySequence | null>>>;
  customHotkeys:   | CustomHotkeys<Readonly<Record<string, AppHotkey<string, HotkeyChord | HotkeySequence | null>>>>
     | null;
  defaultOptions: HotkeysProviderOptions;
  enabled: boolean;
  exclusive:   | boolean
     | {
   }
     | undefined;
  scope: string;
}, {
}, {
}, {
}, string, ComponentProvideOptions, true, {
}, any>;

const HotkeysProvider: DefineComponent<ExtractPropTypes<{
  appHotkeys: {
     default: undefined;
     type: PropType<Readonly<Record<string, AppHotkey<string, HotkeyChord | HotkeySequence | null>>>>;
  };
  customHotkeys: {
     default: undefined;
     type: PropType<
        | CustomHotkeys<Readonly<Record<string, AppHotkey<string, ... | ... | ...>>>>
       | null>;
  };
  defaultOptions: {
     default: undefined;
     type: PropType<HotkeysProviderOptions>;
  };
  enabled: {
     default: boolean;
     type: BooleanConstructor;
  };
  exclusive: {
     default: boolean;
     type: PropType<
        | boolean
        | {
      }
       | undefined>;
  };
  scope: {
     default: undefined;
     type: StringConstructor;
  };
}>, () => 
  | VNode<RendererNode, RendererElement, {
[key: string]: any;
}>[]
  | undefined, {
}, {
}, {
}, ComponentOptionsMixin, ComponentOptionsMixin, {
  customHotkeysChange: (_customHotkeys) => true;
}, string, PublicProps, ToResolvedProps<ExtractPropTypes<{
  appHotkeys: {
     default: undefined;
     type: PropType<Readonly<Record<string, AppHotkey<string, HotkeyChord | HotkeySequence | null>>>>;
  };
  customHotkeys: {
     default: undefined;
     type: PropType<
        | CustomHotkeys<Readonly<Record<string, AppHotkey<..., ...>>>>
       | null>;
  };
  defaultOptions: {
     default: undefined;
     type: PropType<HotkeysProviderOptions>;
  };
  enabled: {
     default: boolean;
     type: BooleanConstructor;
  };
  exclusive: {
     default: boolean;
     type: PropType<
        | boolean
        | {
      }
       | undefined>;
  };
  scope: {
     default: undefined;
     type: StringConstructor;
  };
}>, {
  customHotkeysChange: (_customHotkeys) => true;
}>, {
  appHotkeys: Readonly<Record<string, AppHotkey<string, HotkeyChord | HotkeySequence | null>>>;
  customHotkeys:   | CustomHotkeys<Readonly<Record<string, AppHotkey<string, HotkeyChord | HotkeySequence | null>>>>
     | null;
  defaultOptions: HotkeysProviderOptions;
  enabled: boolean;
  exclusive:   | boolean
     | {
   }
     | undefined;
  scope: string;
}, {
}, {
}, {
}, string, ComponentProvideOptions, true, {
}, any>;

Defined in: HotkeysProvider.tsx:37

Vue component that provides default options, app hotkeys, and the user's custom hotkeys. customHotkeys is read once; listen to custom-hotkeys-change to save changes.

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.

Examples

vue

<template>
  <HotkeysProvider
    :app-hotkeys="appHotkeys"
    :custom-hotkeys="saved"
    @custom-hotkeys-change="save"
  >
    <App />
  </HotkeysProvider>
</template>

<template>
  <HotkeysProvider
    :app-hotkeys="appHotkeys"
    :custom-hotkeys="saved"
    @custom-hotkeys-change="save"
  >
    <App />
  </HotkeysProvider>
</template>

vue

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

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