@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 906 B
JavaScript
import{useRef as e,useEffect as t,useCallback as r}from"react";const n=(n,o,s=null)=>{const c=e(o);t(()=>{c.current=o},[o]);const i=e=>{if("string"!=typeof e)return e;const t=e.toLowerCase().split("+");return{key:t[t.length-1],altKey:t.includes("alt"),ctrlKey:t.includes("ctrl")||t.includes("control"),metaKey:t.includes("meta")||t.includes("cmd")||t.includes("command"),shiftKey:t.includes("shift")}},y=Array.isArray(n)?n.map(i):[i(n)],l=r(e=>{for(const t of y)if("string"==typeof t){if(e.key.toLowerCase()===t.toLowerCase())return void c.current(e)}else{const r="*"===t.key||e.key.toLowerCase()===t.key.toLowerCase(),n=e.altKey===!!t.altKey&&e.ctrlKey===!!t.ctrlKey&&e.metaKey===!!t.metaKey&&e.shiftKey===!!t.shiftKey;if(r&&n)return void c.current(e)}},[y]);t(()=>{const e=s??document,t=l;return e?.addEventListener("keydown",t),()=>e?.removeEventListener("keydown",t)},[l,s])};export{n as useKeyCombo};