Press {help} for help.

searchRef.current?.focus()} > {({ keys }) => }

) } `})}),` `,(0,n.jsx)(e.h3,{id:"hotkeyslist-component",children:"HotkeysList component"}),` `,(0,n.jsxs)(e.p,{children:["The ",(0,n.jsx)(e.code,{children:"HotkeysList"})," component can be used to list all available hotkeys in your app."]}),` `,(0,n.jsxs)(e.p,{children:["Press ",(0,n.jsx)(e.code,{children:"?"})," to open the modal."]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",center:"true",inline:"true",children:`import { Box, Text, Modal, ModalOverlay, ModalCloseButton, ModalBody, Kbd, } from '@chakra-ui/react' import { HotkeysList, HotkeysSearch, HostkeysListItems, useHotkeysShortcut, } from '@saas-ui/react' export default function HotkeysListModal() { const searchRef = useRef(null) const { isOpen, onOpen, onClose } = useDisclosure() const help = useHotkeysShortcut('?' /* general.help */, () => { onOpen() }) // for the sake of this example we don't depend on the hotkeys context here. // const { hotkeys } = useHotkeysContext() const hotkeys = { general: { title: 'General', hotkeys: { help: { label: 'Help', command: '?' }, search: { label: 'Search', command: '\u2318 K' }, }, }, } return ( Press {help} for help Keyboard shortcuts ) } `})}),` `,(0,n.jsx)(e.h2,{id:"accessibility",children:"Accessibility"}),` `,(0,n.jsxs)(e.p,{children:["The ",(0,n.jsx)(e.code,{children:"Hotkey"})," component will add the ",(0,n.jsx)(e.code,{children:"aria-keyshortcuts"})," attribute to the wrapped element. This attribute is used by screen readers to announce the available keyboard shortcuts. Short hand keys like ",(0,n.jsx)(e.code,{children:"\u2318"})," or ",(0,n.jsx)(e.code,{children:"?"})," will be expanded to ",(0,n.jsx)(e.code,{children:"Meta"})," and ",(0,n.jsx)(e.code,{children:"Shift+/"})," respectively."]}),` `,(0,n.jsx)(e.p,{children:"The hotkeys config can be used to display a list of available shortcuts in your app for discoverability."}),` `,(0,n.jsxs)(e.p,{children:["More info: ",(0,n.jsx)(e.a,{href:"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-keyshortcuts",children:"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-keyshortcuts"})]})]})}function H(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(d,t)})):d(t)}var v=H;function B(t,e){throw new Error("Expected "+(e?"component":"object")+" `"+t+"` to be defined: you likely forgot to import, pass, or provide it.")}return b(L);})(); ;return Component;

Hotkeys

Theming