@thibault.sh/hooks/dist/useKeyCombo.cjs.map

A comprehensive collection of React hooks for browser storage, UI interactions, and more

{"version":3,"sources":["../src/hooks/useKeyCombo.ts"],"names":["useKeyCombo","targetCombo","pressedKeys","setPressedKeys","useState","useEffect","handleKeyDown","event","prev","handleKeyUp","next","key"],"mappings":"wCAwCO,SAASA,CAAAA,CAAYC,EAAgC,CAC1D,GAAM,CAACC,CAAaC,CAAAA,CAAc,EAAIC,cAAsB,CAAA,IAAI,GAAK,CAErE,CAAA,OAAAC,gBAAU,IAAM,CACd,IAAMC,CAAiBC,CAAAA,CAAAA,EAAyB,CAC9CJ,CAAgBK,CAAAA,CAAAA,EAAS,IAAI,GAAI,CAAA,CAAC,GAAGA,CAAMD,CAAAA,CAAAA,CAAM,GAAG,CAAC,CAAC,EACxD,CAEME,CAAAA,CAAAA,CAAeF,GAAyB,CAC5CJ,CAAAA,CAAgBK,CAAS,EAAA,CACvB,IAAME,CAAAA,CAAO,IAAI,GAAIF,CAAAA,CAAI,EACzB,OAAAE,CAAAA,CAAK,OAAOH,CAAM,CAAA,GAAG,EACdG,CACT,CAAC,EACH,CAEA,CAAA,OAAA,MAAA,CAAO,iBAAiB,SAAWJ,CAAAA,CAAa,EAChD,MAAO,CAAA,gBAAA,CAAiB,OAASG,CAAAA,CAAW,CAErC,CAAA,IAAM,CACX,MAAO,CAAA,mBAAA,CAAoB,UAAWH,CAAa,CAAA,CACnD,OAAO,mBAAoB,CAAA,OAAA,CAASG,CAAW,EACjD,CACF,EAAG,EAAE,EAEER,CAAY,CAAA,KAAA,CAAOU,GAAQT,CAAY,CAAA,GAAA,CAAIS,CAAG,CAAC,CACxD","file":"useKeyCombo.cjs","sourcesContent":["import { useEffect, useState } from \"react\";\n\ntype KeyCombo = string[];\n\n/**\n * Hook that detects when a specific combination of keys is pressed simultaneously.\n *\n * Useful for implementing keyboard shortcuts, hotkeys, or complex key combinations\n * in your React components. The hook tracks all currently pressed keys and returns\n * true when all keys in the target combination are active.\n *\n * @param targetCombo - Array of key names that make up the combination\n *\n * @returns Boolean indicating if all keys in the combination are currently pressed\n *\n * @example\n * ```tsx\n * function App() {\n *   const isSaveCombo = useKeyCombo(['Control', 's']);\n *   const isUndoCombo = useKeyCombo(['Control', 'z']);\n *   const isComplexCombo = useKeyCombo(['Control', 'Shift', 'p']);\n *\n *   useEffect(() => {\n *     if (isSaveCombo) {\n *       console.log('Save shortcut pressed!');\n *       // Handle save action\n *     }\n *   }, [isSaveCombo]);\n *\n *   return (\n *     <div>\n *       <p>Press Ctrl+S to save</p>\n *       <p>Save combo active: {isSaveCombo ? 'Yes' : 'No'}</p>\n *     </div>\n *   );\n * }\n * ```\n *\n * @see https://thibault.sh/hooks/use-key-combo\n */\nexport function useKeyCombo(targetCombo: KeyCombo): boolean {\n  const [pressedKeys, setPressedKeys] = useState<Set<string>>(new Set());\n\n  useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      setPressedKeys((prev) => new Set([...prev, event.key]));\n    };\n\n    const handleKeyUp = (event: KeyboardEvent) => {\n      setPressedKeys((prev) => {\n        const next = new Set(prev);\n        next.delete(event.key);\n        return next;\n      });\n    };\n\n    window.addEventListener(\"keydown\", handleKeyDown);\n    window.addEventListener(\"keyup\", handleKeyUp);\n\n    return () => {\n      window.removeEventListener(\"keydown\", handleKeyDown);\n      window.removeEventListener(\"keyup\", handleKeyUp);\n    };\n  }, []);\n\n  return targetCombo.every((key) => pressedKeys.has(key));\n}\n"]}