{"componentChunkName":"component---src-templates-post-template-js","path":"/en-US/plus/hotkeys","result":{"data":{"current":{"frontmatter":{"title":"HotKeys","order":33,"brief":"used to facilitate the customization of keyboard shortcut","icon":"doc-configprovider"},"fields":{"type":"plus"},"tableOfContents":{"items":[{"url":"#when-to-use","title":"When to use"},{"url":"#demos","title":"Demos","items":[{"url":"#how-to-import","title":"How to import"},{"url":"#explaination","title":"Explaination"},{"url":"#basic-usage","title":"Basic Usage"},{"url":"#custom-content","title":"Custom content"},{"url":"#prevent-default-event","title":"prevent Default event"},{"url":"#change-the-dom-element-the-listener-is-mounted-on","title":"change the DOM element the listener is mounted on"}]},{"url":"#api-reference","title":"API Reference","items":[{"url":"#hotkeys","title":"HotKeys"}]},{"url":"#design-tokens","title":"Design Tokens"},{"url":"#related-material","title":"Related Material"}]},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"localeCode\": \"en-US\",\n  \"order\": 33,\n  \"category\": \"Plus\",\n  \"title\": \"HotKeys\",\n  \"icon\": \"doc-configprovider\",\n  \"width\": \"60%\",\n  \"brief\": \"used to facilitate the customization of keyboard shortcut\"\n};\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\nvar DesignToken = makeShortcode(\"DesignToken\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"When to use\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"When it is necessary to express the usage method of shortcut key combinations to users, using the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Hotkeys\"), \" component can quickly render the corresponding UI elements and automatically obtain event bindings.\")), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Demos\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"How to import\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"PinCode supported from 2.66.0\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"import\",\n    \"import\": true\n  }, \"import { HotKeys } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Explaination\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The hotkeys only support combinations of modifier keys like Shift, Control, Meta, and Alt with other keys.\"), mdx(\"blockquote\", {\n    parentName: \"section\"\n  }, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/metaKey\"\n  }, \"Meta\"), \" corresponds to Command on macOS and Win on Windows.\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"When setting a shortcut that overlaps with common shortcuts like Ctrl/Meta + C, the preventDefault setting can be used to control whether the default event is triggered.\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Basic Usage\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Pass in key combinations via \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"hotKeys\"), \" and bind a shortcut handler function using \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onHotKey\"), \" to respond to the action.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"When pressing \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Ctrl + Shift + A\"), \", it opens the modal. By default, it listens on the body, making it effective globally.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values\"\n  }, \"values reference\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"It's also recommended to use the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"HotKeys.Keys\"), \" wrapper to set hotkeys.\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React, { useState } from 'react';\\nimport { HotKeys, Modal } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n  const [visible, setVisible] = useState(false);\\n  const showDialog = () => {\\n      setVisible(true);\\n  };\\n  const handleOk = () => {\\n      setVisible(false);\\n  };\\n  const handleCancel = () => {\\n      setVisible(false);\\n  };\\n  const hotKeys = [HotKeys.Keys.Control, 'Shift', HotKeys.Keys.A]\\n  \\n  return (\\n    <div>\\n      <HotKeys hotKeys={hotKeys} onHotKey={showDialog} ></HotKeys>\\n      <Modal\\n          title=\\\"Dialog\\\"\\n          visible={visible}\\n          onOk={handleOk}\\n          onCancel={handleCancel}\\n      >\\n          This is the Modal opened by hotkey: {hotKeys.join('+')}.\\n      </Modal>\\n    </div>\\n  );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Custom content\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Set the characters through \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"content\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React, { useState } from 'react';\\nimport { HotKeys, Modal } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n  const [visible, setVisible] = useState(false);\\n  const showDialog = () => {\\n      setVisible(true);\\n  };\\n  const handleOk = () => {\\n      setVisible(false);\\n  };\\n  const handleCancel = () => {\\n      setVisible(false);\\n  };\\n  const hotKeys = [HotKeys.Keys.Control, 'Shift', HotKeys.Keys.B]\\n  \\n  return (\\n    <div>\\n      <HotKeys hotKeys={hotKeys} onHotKey={showDialog} content={['Ctrl', 'Shift', 'B']}></HotKeys>\\n      <Modal\\n          title=\\\"Dialog\\\"\\n          visible={visible}\\n          onOk={handleOk}\\n          onCancel={handleCancel}\\n      >\\n          This is the Modal opened by hotkey: {hotKeys.join('+')}.\\n      </Modal>\\n    </div>\\n  );\\n}\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Replace the element through \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"render\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React, { useState } from 'react';\\nimport { HotKeys, Modal, Tag } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n  const [visible, setVisible] = useState(false);\\n  const showDialog = () => {\\n      setVisible(true);\\n  };\\n  const handleOk = () => {\\n      setVisible(false);\\n  };\\n  const handleCancel = () => {\\n      setVisible(false);\\n  };\\n  const hotKeys = [HotKeys.Keys.Control, HotKeys.Keys.R]\\n  \\n  const newHotKeys = <Tag>Press Ctrl+R to Open Modal</Tag>\\n  return (\\n    <div>\\n      <HotKeys hotKeys={hotKeys} onHotKey={showDialog} render={newHotKeys}></HotKeys>\\n      <Modal\\n          title=\\\"Dialog\\\"\\n          visible={visible}\\n          onOk={handleOk}\\n          onCancel={handleCancel}\\n      >\\n          This is the Modal opened by hotkey: {hotKeys.join('+')}.\\n      </Modal>\\n    </div>\\n  );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"prevent Default event\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Control the default event by setting \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"preventDefault\"), \".\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React, { useState } from 'react';\\nimport { HotKeys, Modal } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n  const [visible, setVisible] = useState(false);\\n  const showDialog = () => {\\n      setVisible(true);\\n  };\\n  const handleOk = () => {\\n      setVisible(false);\\n  };\\n  const handleCancel = () => {\\n      setVisible(false);\\n  };\\n  const hotKeys = [HotKeys.Keys.Meta, HotKeys.Keys.S]\\n\\n  return (\\n    <div>\\n      <HotKeys hotKeys={hotKeys} onHotKey={showDialog} preventDefault></HotKeys>\\n      <br />\\n      <HotKeys hotKeys={[HotKeys.Keys.Control, HotKeys.Keys.S]} onHotKey={showDialog} preventDefault></HotKeys>\\n      <Modal\\n          title=\\\"Dialog\\\"\\n          visible={visible}\\n          onOk={handleOk}\\n          onCancel={handleCancel}\\n      >\\n          This is the Modal opened by hotkey: {'Meta/Control + S'}.\\n      </Modal>\\n    </div>\\n  );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"change the DOM element the listener is mounted on\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The hotkey is listened to on the body by default, through \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"getListenerTarget\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React, { useState, useRef } from 'react';\\nimport { HotKeys, Input, Modal } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n  const hotKeys = [\\\"Control\\\", \\\"q\\\"]\\n  const [visible, setVisible] = useState(false);\\n  const showDialog = () => {\\n      setVisible(true);\\n  };\\n  const handleOk = () => {\\n      setVisible(false);\\n  };\\n  const handleCancel = () => {\\n      setVisible(false);\\n  };\\n\\n  const inputRef = useRef(null);\\n  return (\\n    <div>\\n      <Input ref={inputRef} placeholder='test for target'></Input>\\n      <HotKeys hotKeys={hotKeys} onHotKey={showDialog} \\n        getListenerTarget={() => inputRef.current}>\\n      </HotKeys>\\n      <Modal\\n          title=\\\"Dialog\\\"\\n          visible={visible}\\n          onOk={handleOk}\\n          onCancel={handleCancel}\\n      >\\n          This is the Modal opened by hotkey: {hotKeys.join('+')}.\\n      </Modal>\\n    </div>\\n  );\\n}\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"API Reference\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"HotKeys\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Property\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Instructions\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"type\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Default\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"class name\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"content\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Set the characters\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string[]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"getListenerTarget\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"change the DOM element the listener is mounted on\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"() => HTMLElement\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"document.body\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"hotKeys\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Define keyboard shortcut\\uFF0C\", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values\"\n  }, \"values\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"KeyboardEvent.key[]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onClick\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"callback that clicking triggers\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"() => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onHotKey\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"callback that hotKeys triggers\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(e: KeyboardEvent) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"preventDefault\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Whether to prevent the default behavior of the shortcut\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"render\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Replace the element\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"() => ReactNode \", \"|\", \" ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Design Tokens\"), mdx(DesignToken, {\n    mdxType: \"DesignToken\"\n  })), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Related Material\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"semi-material-list\", {\n    code: \"46\"\n  }))));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"en-US/plus/hotkeys","next":{"fields":{"slug":"zh-CN/plus/hotkeys"},"id":"4f46fcaa-7f8c-55b8-9321-69f669434693","frontmatter":{"title":"HotKeys 快捷键","localeCode":"zh-CN","icon":"doc-configprovider","showNew":null}},"previous":{"fields":{"slug":"zh-CN/plus/jsonviewer"},"id":"4531d8cd-b8a2-57e9-b3f1-19f699f8a903","frontmatter":{"title":"JsonViewer Json编辑器","localeCode":"zh-CN","icon":"doc-jsonviewer","showNew":null}}}},"staticQueryHashes":["1348983216898582","1477422646898582","3245198693898582","417590761898582","63159454898582"]}