{"_id":"@ahmedayob/duck-shortcut","name":"@ahmedayob/duck-shortcut","dist-tags":{"latest":"0.0.2"},"versions":{"0.0.2":{"name":"@ahmedayob/duck-shortcut","version":"0.0.2","main":"index.js","module":"dist/index.mjs","types":"dist/index.d.ts","repository":{"type":"git","url":"git+https://github.com/TheDuckUI/shortcut.git"},"github":"https://github.com/TheDuckUI/shortcut","homepage":"https://github.com/TheDuckUI/shortcut","private":false,"keywords":["react","react-component","keyboard-shortcuts","hotkeys","react-hotkeys","mousetrap","keyboard-event","key-binding","keyboard-navigation","accessibility","react-keyboard-shortcuts","keyboard-commands","keyboard-handler","shortcuts","ctrl-key","meta-key","alt-key","key-events","web-accessibility"],"author":{"name":"ahmed ayob"},"license":"MIT","description":"A lightweight React component for easily binding and handling keyboard shortcuts in your React applications.","peerDependencies":{"@changesets/cli":"^2.27.7","@types/mousetrap":"^1.6.15","@types/node":"^22.0.0","@types/react":"^18.3.4","@types/react-dom":"^18.3.0","date-fns":"^3.6.0","jsdom":"^25.0.0","mousetrap":"^1.6.5","react":"^18.3.1","react-dom":"^18.3.1","tsup":"^8.2.3","typescript":"^5.5.4","vitest":"^2.0.4","zod":"^3.23.8"},"engines":{"node":">=12.0.0","npm":">=6.0.0"},"dependencies":{"esbuild":"^0.23.1","vite":"^5.4.2"},"scripts":{"dev":"vite","test":"vitest run","build":"tsup","lint":"tsc","ci":"pnpm run lint && pnpm run build","release":"pnpm run ci && changeset publish"},"bugs":{"url":"https://github.com/TheDuckUI/shortcut/issues"},"_id":"@ahmedayob/duck-shortcut@0.0.2","_integrity":"sha512-7AqNa0fN4jWAaN+8E7noDVPw0j2Gol3dKwrOwCkGje0Ov9ClV/Q5b/pnonsZdgw1+N54Z9qsuzf8KGSvGhFvWg==","_resolved":"/tmp/94b2addddd1cb240d2edbf416ea2053c/ahmedayob-duck-shortcut-0.0.2.tgz","_from":"file:ahmedayob-duck-shortcut-0.0.2.tgz","_nodeVersion":"16.20.2","_npmVersion":"8.19.4","dist":{"integrity":"sha512-7AqNa0fN4jWAaN+8E7noDVPw0j2Gol3dKwrOwCkGje0Ov9ClV/Q5b/pnonsZdgw1+N54Z9qsuzf8KGSvGhFvWg==","shasum":"c5d471c238f43b58f5a39eae48d7f01bd24eedc0","tarball":"https://registry.npmjs.org/@ahmedayob/duck-shortcut/-/duck-shortcut-0.0.2.tgz","fileCount":7,"unpackedSize":12735,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD/R7S979wSj/m5260BOkN5olrj8MzlwchtUSM+MkSsmwIgJlr9kryZTdi9X9uWBNWh53DR13+bO9qMQMbNGInjoXc="}]},"_npmUser":{"name":"wild-duck","email":"ahmedayobbusiness@gmail.com"},"directories":{},"maintainers":[{"name":"wild-duck","email":"ahmedayobbusiness@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/duck-shortcut_0.0.2_1724868239267_0.004868677138931687"},"_hasShrinkwrap":false}},"time":{"created":"2024-08-28T18:03:59.174Z","0.0.2":"2024-08-28T18:03:59.443Z","modified":"2024-08-28T18:03:59.826Z"},"maintainers":[{"name":"wild-duck","email":"ahmedayobbusiness@gmail.com"}],"description":"A lightweight React component for easily binding and handling keyboard shortcuts in your React applications.","homepage":"https://github.com/TheDuckUI/shortcut","keywords":["react","react-component","keyboard-shortcuts","hotkeys","react-hotkeys","mousetrap","keyboard-event","key-binding","keyboard-navigation","accessibility","react-keyboard-shortcuts","keyboard-commands","keyboard-handler","shortcuts","ctrl-key","meta-key","alt-key","key-events","web-accessibility"],"repository":{"type":"git","url":"git+https://github.com/TheDuckUI/shortcut.git"},"author":{"name":"ahmed ayob"},"bugs":{"url":"https://github.com/TheDuckUI/shortcut/issues"},"license":"MIT","readme":"<p align=\"center\">\n  <img src=\"./public/logo.png\" alt=\"Duck UI Logo\" width=\"200\"/>\n</p>\n\n# `@ahmedayob/duck-shortcut`\n\nA lightweight React component for easily binding and handling keyboard shortcuts in your React applications.\n\n## Features\n\n- **Easy Integration**: Integrate keyboard shortcuts into your React application effortlessly. Simply use the `useDuckShortcut` hook and pass the required props to handle key combinations or sequences.\n- **Support for Key Combinations**: Handle key combinations like `Ctrl+S` or `Command+K` with ease. The component can take a single string or an array of key combinations.\n- **Support for Key Sequences**: React to key sequences such as `Up Up Down Down Left Right B A Enter`. You can define these sequences as strings or arrays.\n- **Mixed Key Combinations and Sequences**: Combine both key combinations and sequences to define more complex shortcuts.\n- **Global Keyboard Event Listener**: The component adds a global keyboard event listener that works anywhere in the component tree without preventing events from bubbling or capturing.\n- **TypeScript Support**: Fully implemented in TypeScript with type definitions, ensuring a smooth development experience with type safety.\n- **Case Insensitivity**: The component handles key shortcuts in a case-insensitive manner, so you don’t need to worry about key case.\n- **No Conflict with Other Components**: Use multiple instances of `useDuckShortcut` for different shortcuts without conflicts.\n\n## Installation\n\nTo install the toolkit, use npm or yarn:\n\n```bash\nnpm install @ahmedayob/duck-shortcut\n# or\nyarn add @ahmedayob/duck-shortcut\n```\n\n## Usage\n\nHere's a quick guide on how to use the library:\n\n```tsx\nimport { useDuckShortcut } from '@ahmedayob/duck-shortcut'\n\nconst App = () => {\n  useDuckShortcut({\n    keys: ['ctrl+s'], // Key combinations or sequences\n    onKeysPressed: () => {\n      console.log('Ctrl+S was pressed!')\n    },\n  })\n\n  return <div>Press Ctrl+S to trigger the shortcut</div>\n}\n```\n\n### Handling Multiple Shortcuts\n\nYou can handle multiple key combinations or sequences by passing them as an array:\n\n```typescript\nimport { useDuckShortcut } from '@ahmedayob/duck-shortcut'\nconst App = () => {\n  useDuckShortcut({\n    keys: ['ctrl+s', 'command+k'], // Multiple shortcuts\n    onKeysPressed: () => {\n      console.log('Ctrl+S or Command+K was pressed!')\n    },\n  })\n  return <div>Press Ctrl+S or Command+K to trigger the shortcut</div>\n}\n```\n\n## API Reference\n\nHere’s an API reference for `@ahmedayob/duck-shortcut` in MDX format, detailing the types and usage of the `useDuckShortcut` hook:\n\n## `useDuckShortcut`\n\nThe `useDuckShortcut` hook allows you to bind keyboard shortcuts to callback functions in your React components.\n\n### Importing\n\n```jsx\nimport { useDuckShortcut } from '@ahmedayob/duck-shortcut'\n```\n\n### Usage\n\n```jsx\nuseDuckShortcut({\n  keys: /* Key combinations or sequences */,\n  onKeysPressed: /* Callback function */,\n});\n```\n\n### Parameters\n\n#### `keys`\n\n- **Type**: `string | string[]`\n- **Description**: Defines the keyboard shortcuts to listen for. You can specify key combinations (e.g., `'ctrl+s'`, `'command+k'`) or key sequences (e.g., `'Up Up Down Down Left Right B A Enter'`).\n\n##### Example\n\n```jsx\nkeys: 'ctrl+s'\n```\n\nor\n\n```jsx\nkeys: ['ctrl+s', 'command+k']\n```\n\nor\n\n```jsx\nkeys: 'Up Up Down Down Left Right B A Enter'\n```\n\n#### `onKeysPressed`\n\n- **Type**: `() => void`\n- **Description**: Callback function that gets called when the specified key combinations or sequences are pressed.\n\n##### Example\n\n```jsx\nonKeysPressed: () => {\n  console.log('Shortcut triggered!')\n}\n```\n\n### Example\n\n```jsx\nimport { useDuckShortcut } from '@ahmedayob/duck-shortcut'\n\nconst App = () => {\n  useDuckShortcut({\n    keys: ['ctrl+s', 'command+k'], // Define your shortcuts\n    onKeysPressed: () => {\n      // Callback when shortcuts are pressed\n      console.log('Shortcut triggered!')\n    },\n  })\n\n  return <div>Press Ctrl+S or Command+K</div>\n}\n```\n\n### Notes\n\n- **Key Combinations**: These are key presses that need to happen simultaneously (e.g., `'ctrl+s'`, `'command+shift+P'`).\n- **Key Sequences**: These are key presses that need to happen in sequence (e.g., `'Up Up Down Down Left Right B A Enter'`).\n- **Case Sensitivity**: Key names are case-insensitive.\n\n## Type Definitions\n\n### `DuckShortcutProps`\n\n```typescript\ninterface DuckShortcutProps {\n  keys: string | string[] // Key combinations or sequences\n  onKeysPressed: () => void // Callback when shortcuts are pressed\n}\n```\n\n### `useDuckShortcut`\n\n```typescript\ndeclare function useDuckShortcut(props: DuckShortcutProps): void\n```\n\n## License\n\nThis library is available under the [MIT License](LICENSE).\n\n## Contributing\n\nThis reference includes type definitions for `DuckShortcutProps`, as well as detailed information on how to use the `useDuckShortcut` hook.\n\nContributions are welcome! Please open issues and pull requests on the [GitHub repository](https://github.com/TheDuckUI/shortcut).\n\n## License\n\nThis project is licensed under the MIT License. See the [LICENSE](./LICENSE) file for details.\n","readmeFilename":"README.md"}