feat: update api

feat: rename package and prepare release

Author: santigp258

.idea/discord.xml

@@ -1,4 +1,4 @@
-# KeyShort
+# react-keybinds
 
 Simple package to manage keyboard shortcuts
 
@@ -7,35 +7,35 @@ Simple package to manage keyboard shortcuts
 #### Using npm
 
 ```bash
-npm i keyshort
+npm i react-keybinds
 ```
 
 #### Using Yarn
 
 ```bash
-yarn add keyshort
+yarn add react-keybinds
 ```
 
 #### Using pnpm
 
 ```bash
-pnpm add keyshort
+pnpm add react-keybinds
 ```
 
 # Usage
 
 <sub>You can take a look at the [example](./example) </sub>
 
-### 1. Configuring the KeyShort provider
+### 1. Configuring the KeyBind provider
 
 ```tsx
-import {KeyShortProvider} from 'keyshort';
+import {KeyBindProvider} from 'react-keybinds';
 
 const App = () => {
     return (
-        <KeyShortProvider>
+        <KeyBindProvider>
             hello world
-        </KeyShortProvider>
+        </KeyBindProvider>
     );
 };
 ```
@@ -48,12 +48,12 @@ const App = () => {
 You can register commands globally
 
 ```tsx
-import {KeyShortProvider, ShortcutType} from 'keyshort';
+import {KeyBindProvider, ShortcutType} from 'react-keybinds';
 
 const GLOBAL_COMMANDS: ShortcutType[] = [
     {
         keys: {
-            Mac: ['Meta', 'Shift', 'P'],
+            Mac: ['Control', 'Shift', 'P'],
             Windows: ['Control', 'Shift', 'P'],
         },
         label: 'Test command',
@@ -65,9 +65,9 @@ const GLOBAL_COMMANDS: ShortcutType[] = [
 
 const App = () => {
     return (
-        <KeyShortProvider shortcuts={GLOBAL_COMMANDS}>
+        <KeyBindProvider shortcuts={GLOBAL_COMMANDS}>
             hello world
-        </KeyShortProvider>
+        </KeyBindProvider>
     );
 };
 ```
@@ -78,10 +78,10 @@ You can register a command in a specific part of your application. This is usefu
 handler that exists in a specific component.
 
 ```tsx
-import {KeyShortProvider, useKeyShort} from 'keyshort';
+import {KeyBindProvider, useKeyBind} from 'react-keybinds';
 
 const RegisterShortcutButton = () => {
-    const {registerShortcut} = useKeyShort();
+    const {registerShortcut} = useKeyBind();
 
     const handleClickRegister = () => {
         registerShortcut({
@@ -104,22 +104,22 @@ const RegisterShortcutButton = () => {
 
 const App = () => {
     return (
-        <KeyShortProvider>
+        <KeyBindProvider>
             <RegisterShortcutButton/>
-        </KeyShortProvider>
+        </KeyBindProvider>
     );
 };
 ```
 
 ### 4. List registered shortcuts
 
-You can list the registered shortcuts using the useKeyShort hook
+You can list the registered shortcuts using the useKeyBind hook
 
 ```tsx
-import {KeyShortProvider, useKeyShort} from 'keyshort';
+import {KeyBindProvider, useKeyBind} from 'react-keybinds';
 
 const ShowShortcuts = () => {
-    const {shortcuts} = useKeyShort();
+    const {shortcuts} = useKeyBind();
     const shortcutsList = shortcuts?.map((shortcut, index) => {
         return (
             <div key={index}>
@@ -143,9 +143,9 @@ const ShowShortcuts = () => {
 };
 const App = () => {
     return (
-        <KeyShortProvider>
+        <KeyBindProvider>
             <ShowShortcuts/>
-        </KeyShortProvider>
+        </KeyBindProvider>
     );
 };
 ```

README.md

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { useKeyShort } from '../../.';
+import { useKeyBind } from '../../.';
 
 const RegisterShortcut = () => {
-  const { registerShortcut } = useKeyShort();
+  const { registerShortcut } = useKeyBind();
 
   const handleClickRegister = () => {
     registerShortcut({

example/components/RegisterShortcut.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { useKeyShort } from '../../.';
+import { useKeyBind } from '../../.';
 
 const ShowShortcuts = () => {
-  const { shortcuts } = useKeyShort();
+  const { shortcuts } = useKeyBind();
   const shortcutsList = shortcuts?.map((shortcut, index) => {
     return (
       <div key={index}>

example/components/ShowShortcuts.tsx

@@ -1,18 +1,19 @@
 import 'react-app-polyfill/ie11';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { KeyShortProvider, ShortcutType } from '../.';
+import { KeyBindProvider, ShortcutType } from '../.';
 import ShowShortcuts from './components/ShowShortcuts';
 import RegisterShortcut from './components/RegisterShortcut';
 
 const GLOBAL_COMMANDS: ShortcutType[] = [
   {
     keys: {
-      Mac: ['Meta', 'Shift', 'P'],
+      Mac: ['Control', 'Shift', 'P'],
       Windows: ['Control', 'Shift', 'P'],
     },
     label: 'Test command',
     callback: () => {
+      // eslint-disable-next-line no-alert
       alert('Hello world');
     },
   },
@@ -21,10 +22,10 @@ const GLOBAL_COMMANDS: ShortcutType[] = [
 const App = () => {
   return (
     <div>
-      <KeyShortProvider shortcuts={GLOBAL_COMMANDS}>
+      <KeyBindProvider shortcuts={GLOBAL_COMMANDS}>
         <ShowShortcuts />
         <RegisterShortcut />
-      </KeyShortProvider>
+      </KeyBindProvider>
     </div>
   );
 };

example/index.tsx

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.0",
+  "version": "1.0.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -22,17 +22,19 @@
     "build-storybook": "build-storybook"
   },
   "keywords": [
-    "keyshort",
+    "react-keybinds",
     "nextjs",
     "javascript",
     "typescript",
     "react",
     "keyboard",
-    "shortcuts"
+    "shortcuts",
+    "hotkeys",
+    "keybinds"
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/lifespikes/keyshort.git"
+    "url": "https://github.com/lifespikes/react-keybinds.git"
   },
   "peerDependencies": {
     "react": ">=16"
@@ -48,7 +50,7 @@
     "singleQuote": true,
     "trailingComma": "es5"
   },
-  "name": "keyshort",
+  "name": "react-keybinds",
   "author": "santigp258",
   "description": "Simple package to manage keyboard shortcuts",
   "module": "dist/keyshort.esm.js",

package.json

@@ -7,21 +7,21 @@ import React, {
 } from 'react';
 
 import {
-  KeyShortContextState,
-  KeyShortProviderPropsI,
+  KeyBindContextState,
+  KeyBindProviderPropsI,
   ShortcutType,
 } from '../types';
 import { isDuplicate } from '../utils';
 import { useShortcuts } from '../hooks';
 
-export const KeyShortContext = createContext({
+export const KeyBindContext = createContext({
   shortcuts: [] as ShortcutType[],
   registerShortcut: (shortcut: ShortcutType) => {
     console.log('Not implemented', { shortcut });
   },
-} as KeyShortContextState);
+} as KeyBindContextState);
 
-const KeyShortProvider: FC<KeyShortProviderPropsI> = ({
+const KeyBindProvider: FC<KeyBindProviderPropsI> = ({
   children,
   shortcuts = [],
 }) => {
@@ -40,18 +40,18 @@ const KeyShortProvider: FC<KeyShortProviderPropsI> = ({
 
   useShortcuts(storeShortcuts);
 
-  const commandsContext = useMemo<KeyShortContextState>(
+  const commandsContext = useMemo<KeyBindContextState>(
     () => ({
       shortcuts: storeShortcuts,
       registerShortcut,
     }),
     [storeShortcuts]
   );
   return (
-    <KeyShortContext.Provider value={commandsContext}>
+    <KeyBindContext.Provider value={commandsContext}>
       {children}
-    </KeyShortContext.Provider>
+    </KeyBindContext.Provider>
   );
 };
 
-export default KeyShortProvider;
+export default KeyBindProvider;

src/context/KeyShortContext.tsx renamed to src/context/KeyBindContext.tsx

@@ -1 +1 @@
-export { default as KeyShortProvider } from './KeyShortContext';
+export { default as KeyBindProvider } from './KeyBindContext';

src/context/index.ts

@@ -1,2 +1,2 @@
-export { useKeyShort } from './useKeyShort';
+export { useKeyBind } from './useKeyBind';
 export { useShortcuts } from './useShortcuts';

src/hooks/index.ts

@@ -0,0 +1,13 @@
+import { useContext } from 'react';
+import { KeyBindContext } from '../context/KeyBindContext';
+import { KeyBindContextState } from '../types';
+
+export const useKeyBind = (): KeyBindContextState => {
+  const keyBindContext = useContext(KeyBindContext);
+
+  if (!keyBindContext) {
+    throw new Error('useKeyBind hook must be used with KeyBindProvider');
+  }
+
+  return keyBindContext;
+};