https://react-hotkeys-hook.vercel.app/assets/js/2cbcd466.8d59303c.js

1"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2835],{68:(e,a,t)=>{t.d(a,{A:()=>s});var n=t(4041),r=t(2754);const s={React:n,...n,isHotkeyPressed:r.vs,useHotkeys:r.vC,useRecordHotkeys:r.KO}},422:(e,a,t)=>{t.r(a),t.d(a,{assets:()=>d,contentTitle:()=>c,default:()=>m,frontMatter:()=>i,metadata:()=>n,toc:()=>h});const n=JSON.parse('{"id":"documentation/installation","title":"Installation","description":"Via Package Manager","source":"@site/docs/documentation/installation.mdx","sourceDirName":"documentation","slug":"/documentation/installation","permalink":"/docs/documentation/installation","draft":false,"unlisted":false,"editUrl":"https://github.com/JohannesKlauss/react-hotkeys-hook/edit/main/documentation/docs/documentation/installation.mdx","tags":[],"version":"current","sidebarPosition":1,"frontMatter":{"sidebar_position":1},"sidebar":"tutorialSidebar","previous":{"title":"Quick Start","permalink":"/docs/intro"},"next":{"title":"Basic Usage","permalink":"/docs/documentation/useHotkeys/basic-usage"}}');var r=t(1085),s=t(1184),o=t(3803),l=t(3759),u=t(806);const i={sidebar_position:1},c="Installation",d={},h=[{value:"Via Package Manager",id:"via-package-manager",level:2},{value:"Via CDN",id:"via-cdn",level:2}];function p(e){const a={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",...(0,s.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(a.header,{children:(0,r.jsx)(a.h1,{id:"installation",children:"Installation"})}),"\n",(0,r.jsx)(a.h2,{id:"via-package-manager",children:"Via Package Manager"}),"\n",(0,r.jsx)(a.p,{children:"Install the package using your preferred package manager:"}),"\n",(0,r.jsxs)(o.A,{defaultValue:"npm",values:[{label:"NPM",value:"npm"},{label:"Bun",value:"bun"},{label:"Yarn",value:"yarn"}],children:[(0,r.jsx)(l.A,{value:"yarn",children:(0,r.jsx)(u.A,{className:"language-shell",children:"yarn add react-hotkeys-hook"})}),(0,r.jsx)(l.A,{value:"npm",children:(0,r.jsx)(u.A,{className:"language-shell",children:"npm i react-hotkeys-hook"})}),(0,r.jsx)(l.A,{value:"bun",children:(0,r.jsx)(u.A,{className:"language-shell",children:"bun i react-hotkeys-hook"})})]}),"\n",(0,r.jsx)(a.pre,{children:(0,r.jsx)(a.code,{className:"language-jsx",children:"import { useHotkeys } from 'react-hotkeys-hook';\n"})}),"\n",(0,r.jsx)(a.h2,{id:"via-cdn",children:"Via CDN"}),"\n",(0,r.jsxs)(a.p,{children:["You can import the ES Module directly from ",(0,r.jsx)(a.a,{href:"https://unpkg.com",children:"unpkg.com"}),":"]}),"\n",(0,r.jsx)(a.pre,{children:(0,r.jsx)(a.code,{className:"language-js",children:"import { useHotkeys } from 'https://unpkg.com/react-hotkeys-hook@latest/dist/react-hotkeys-hook.esm.js';\n"})})]})}function m(e={}){const{wrapper:a}={...(0,s.R)(),...e.components};return a?(0,r.jsx)(a,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},841:(e,a,t)=>{t.d(a,{OC:()=>m,O_:()=>v,uc:()=>f,vT:()=>c});var n=t(4041),r=t(6090),s=t(3351),o=t(6703),l=t(6004),u=t(1718),i=t(1085);function c(e){return n.Children.toArray(e).filter((e=>"\n"!==e))}function d(e){const{values:a,children:t}=e;return(0,n.useMemo)((()=>{const e=a??function(e){return n.Children.toArray(e).flatMap((e=>{if(!e)return[];if((0,n.isValidElement)(e)&&function(e){const{props:a}=e;return!!a&&"object"==typeof a&&"value"in a}(e))return[e];const a="string"==typeof e.type?e.type:e.type.name;throw new Error(`Docusaurus error: Bad <Tabs> child <${a}>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.\nIf you do not want to pass on a "value" prop to the direct children of <Tabs>, you can also pass an explicit <Tabs values={...}> prop.`)})).map((({props:{value:e,label:a,attributes:t,default:n}})=>({value:e,label:a,attributes:t,default:n})))}(t);return function(e){const a=(0,l.XI)(e,((e,a)=>e.value===a.value));if(a.length>0)throw new Error(`Docusaurus error: Duplicate values "${a.map((e=>`'${e.value}'`)).join(", ")}" found in <Tabs>. Every value needs to be unique.`)}(e),e}),[a,t])}function h({value:e,tabValues:a}){return a.some((a=>a.value===e))}function p({queryString:e=!1,groupId:a}){const t=(0,r.W6)(),s=function({queryString:e=!1,groupId:a}){if("string"==typeof e)return e;if(!1===e)return null;if(!0===e&&!a)throw new Error('Docusaurus error: The <Tabs> component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return a??null}({queryString:e,groupId:a});return[(0,o.aZ)(s),(0,n.useCallback)((e=>{if(!s)return;const a=new URLSearchParams(t.location.search);a.set(s,e),t.replace({...t.location,search:a.toString()})}),[s,t])]}function m(e){const{defaultValue:a,queryString:t=!1,groupId:r}

1=e,o=d(e),[l,i]=(0,n.useState)((()=>function({defaultValue:e,tabValues:a}){if(0===a.length)throw new Error("Docusaurus error: the <Tabs> component requires at least one <TabItem> children component");if(e){if(!h({value:e,tabValues:a}))throw new Error(`Docusaurus error: The <Tabs> has a defaultValue "${e}" but none of its children has the corresponding value. Available values are: ${a.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return e}const t=a.find((e=>e.default))??a[0];if(!t)throw new Error("Unexpected error: 0 tabValues");return t.value}({defaultValue:a,tabValues:o}))),[c,m]=p({queryString:t,groupId:r}),[b,f]=function({groupId:e}){const a=function(e){return e?`docusaurus.tab.${e}`:null}(e),[t,r]=(0,u.Dv)(a);return[t,(0,n.useCallback)((e=>{a&&r.set(e)}),[a,r])]}({groupId:r}),v=(()=>{const e=c??b;return h({value:e,tabValues:o})?e:null})();(0,s.A)((()=>{v&&i(v)}),[v]);return{selectedValue:l,selectValue:(0,n.useCallback)((e=>{if(!h({value:e,tabValues:o}))throw new Error(`Can't select invalid tab value=${e}`);i(e),m(e),f(e)}),[m,f,o]),tabValues:o,lazy:e.lazy??!1,block:e.block??!1}}const b=(0,n.createContext)(null);function f(){const e=n.useContext(b);if(!e)throw new Error("useTabsContext() must be used within a Tabs component");return e}function v(e){return(0,i.jsx)(b.Provider,{value:e.value,children:e.children})}},1184:(e,a,t)=>{t.d(a,{R:()=>o,x:()=>l});var n=t(4041);const r={},s=n.createContext(r);function o(e){const a=n.useContext(s);return n.useMemo((function(){return"function"==typeof e?e(a):{...a,...e}}),[a,e])}function l(e){let a;return a=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),n.createElement(s.Provider,{value:a},e.children)}},3759:(e,a,t)=>{t.d(a,{A:()=>u});t(4041);var n=t(4357),r=t(841);const s={tabItem:"tabItem_OMyP"};var o=t(1085);function l({children:e,className:a,hidden:t}){return(0,o.jsx)("div",{role:"tabpanel",className:(0,n.A)(s.tabItem,a),hidden:t,children:e})}function u({children:e,className:a,value:t}){const{selectedValue:n,lazy:s}=(0,r.uc)(),u=t===n;return!u&&s?null:(0,o.jsx)(l,{className:a,hidden:!u,children:e})}},3803:(e,a,t)=>{t.d(a,{A:()=>p});t(4041);var n=t(4357),r=t(7473),s=t(841),o=t(1034),l=t(213);const u={tabList:"tabList_M0Dn",tabItem:"tabItem_ysIP"};var i=t(1085);function c({className:e}){const{selectedValue:a,selectValue:t,tabValues:r,block:l}=(0,s.uc)(),c=[],{blockElementScrollPositionUntilNextRender:d}=(0,o.a_)(),h=e=>{const n=e.currentTarget,s=c.indexOf(n),o=r[s].value;o!==a&&(d(n),t(o))},p=e=>{let a=null;switch(e.key){case"Enter":h(e);break;case"ArrowRight":{const t=c.indexOf(e.currentTarget)+1;a=c[t]??c[0];break}case"ArrowLeft":{const t=c.indexOf(e.currentTarget)-1;a=c[t]??c[c.length-1];break}}a?.focus()};return(0,i.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,n.A)("tabs",{"tabs--block":l},e),children:r.map((({value:e,label:t,attributes:r})=>(0,i.jsx)("li",{role:"tab",tabIndex:a===e?0:-1,"aria-selected":a===e,ref:e=>{c.push(e)},onKeyDown:p,onClick:h,...r,className:(0,n.A)("tabs__item",u.tabItem,r?.className,{"tabs__item--active":a===e}),children:t??e},e)))})}function d({children:e}){return(0,i.jsx)("div",{className:"margin-top--md",children:e})}function h({className:e,children:a}){return(0,i.jsxs)("div",{className:(0,n.A)(r.G.tabs.container,"tabs-container",u.tabList),

1children:[(0,i.jsx)(c,{className:e}),(0,i.jsx)(d,{children:a})]})}function p(e){const a=(0,l.A)(),t=(0,s.OC)(e);return(0,i.jsx)(s.O_,{value:t,children:(0,i.jsx)(h,{className:e.className,children:(0,s.vT)(e.children)})},String(a))}}}]);