core setup

.babelrc

@@ -0,0 +1,11 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": "> 0.25%, not dead"
+      }
+    ],
+    "@babel/preset-react"
+  ]
+}

.gitignore

@@ -0,0 +1 @@
+node_modules

package.json

@@ -0,0 +1,28 @@
+{
+  "name": "use-key-capture",
+  "version": "0.0.1-beta.0",
+  "main": "dist/useKeyCapture.js",
+  "license": "MIT",
+  "scripts": {
+    "webpack": "rimraf dist && webpack"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.7.7",
+    "@babel/preset-env": "^7.7.7",
+    "@babel/preset-react": "^7.7.4",
+    "babel-loader": "^8.0.6",
+    "rimraf": "^3.0.0",
+    "webpack": "^4.41.5",
+    "webpack-cli": "^3.3.10"
+  },
+  "dependencies": {
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0"
+  },
+  "browserslist": "> 0.25%, not dead",
+  "author": "Pranesh T G",
+  "homepage": "https://github.com/pranesh239/use-key-capture#readme",
+  "bugs": {
+    "url": "https://github.com/pranesh239/use-key-capture/issues"
+  }
+}

src/index.js

@@ -0,0 +1 @@
+export { default } from './useKeyCapture';

src/useKeyCapture/index.js

@@ -0,0 +1,51 @@
+import { useEffect, useReducer } from 'react';
+import reducer from './useKeyCaptureReducer';
+
+import {
+  useKeyInitialState,
+  getActionType,
+  useKeyActionTypes,
+  useEnhancedReducer
+} from './useKeyCaptureUtils';
+
+function useKeys() {
+  const [keyData, dispatch] = useReducer(
+    useEnhancedReducer(reducer),
+    useKeyInitialState
+  );
+
+  const dispatchWithActionDetails = event => {
+    dispatch({
+      payload: event,
+      type: getActionType(event)
+    });
+  };
+
+  /**
+   * It resets all state values to initial values
+   */
+  const resetKeyDetails = () => {
+    dispatch({
+      type: useKeyActionTypes.RESET_CAPTURES
+    });
+  };
+
+  useEffect(() => {
+    // example for IS_TRUSTED
+    // setTimeout(() => {
+    //   document.dispatchEvent(new KeyboardEvent('keydown'), { key: 'Escape' });
+    // }, 2000);
+  }, [keyData]);
+
+  useEffect(() => {
+    document.addEventListener('keydown', dispatchWithActionDetails);
+
+    return () => {
+      document.removeEventListener('keydown', dispatchWithActionDetails);
+    };
+  }, []);
+
+  return { keyData, resetKeyDetails };
+}
+
+export default useKeys;

src/useKeyCapture/useKeyCaptureReducer.js

@@ -0,0 +1,42 @@
+import { useKeyInitialState, useKeyActionTypes } from './useKeyCaptureUtils';
+
+export default function keyReducer(state, action) {
+  switch (action.type) {
+    case useKeyActionTypes.ESCAPE_KEY: {
+      return {
+        ...useKeyInitialState,
+        isEscape: true
+      };
+    }
+
+    case useKeyActionTypes.ENTER_KEY: {
+      return {
+        ...useKeyInitialState,
+        isEnter: true
+      };
+    }
+
+    case useKeyActionTypes.CAPS_ALPHABET: {
+      return {
+        ...useKeyInitialState,
+        isCaps: true
+      };
+    }
+
+    case useKeyActionTypes.SMALL_ALPHABET: {
+      return {
+        ...useKeyInitialState,
+        isSmall: true
+      };
+    }
+
+    case useKeyActionTypes.NUMBER: {
+      return {
+        ...useKeyInitialState,
+        isNumber: true
+      };
+    }
+    default:
+      return { ...useKeyInitialState };
+  }
+}

src/useKeyCapture/useKeyCaptureUtils.js

@@ -0,0 +1,67 @@
+import { useCallback } from 'react';
+
+export const useKeyInitialState = {
+  keyCode: null,
+  keyName: null,
+  isEscape: false,
+  isEnter: false,
+  isSpace: false,
+  isRightArrow: false,
+  isLeftArrow: false,
+  isUpArrow: false,
+  isDownArrow: false,
+  isTab: false,
+  isWithShift: false,
+  isWithCtrl: false,
+  isNumber: false,
+  isCaps: false,
+  isSmall: false,
+  isSpecialCharacter: false
+};
+
+export const useKeyActionTypes = {
+  ENTER_KEY: 'ENTER_KEY',
+  ESCAPE_KEY: 'ESCAPE_KEY',
+  RESET_CAPTURES: 'RESET_CAPTURES',
+  CAPS_ALPHABET: 'CAPS',
+  SMALL_ALPHABET: 'SMALL',
+  NUMBER: 'NUMBER'
+};
+
+const keyCodeMapper = {
+  13: useKeyActionTypes.ENTER_KEY,
+  27: useKeyActionTypes.ESCAPE_KEY
+};
+
+const isCapitalLetterPressed = key => /^[A-Z]$/.test(key);
+const isSmallLetterPressed = key => /^[a-z]$/.test(key);
+
+export const getActionType = eventDetails => {
+  if (!eventDetails) {
+    throw new Error('Event called with no details');
+  }
+
+  if (keyCodeMapper[eventDetails.keyCode])
+    return keyCodeMapper[eventDetails.keyCode];
+
+  if (isCapitalLetterPressed(eventDetails.key)) {
+    return useKeyActionTypes.CAPS_ALPHABET;
+  }
+
+  if (isSmallLetterPressed(eventDetails.key)) {
+    return useKeyActionTypes.SMALL_ALPHABET;
+  }
+
+  if (eventDetails.keyCode >= 48 && eventDetails.keyCode <= 57) {
+    return useKeyActionTypes.NUMBER;
+  }
+  return 'SOME_OTHER_KEY';
+};
+
+export const useEnhancedReducer = reducer =>
+  useCallback(
+    (state, action) => {
+      return reducer(state, action);
+    },
+    [reducer]
+  );

webpack.config.js

@@ -0,0 +1,20 @@
+const path = require('path');
+
+module.exports = {
+  mode: 'production',
+  entry: path.resolve(__dirname, 'src/index.js'),
+  output: {
+    filename: 'useKeyCapture.js',
+    path: path.resolve(__dirname, 'dist')
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        include: path.resolve(__dirname, 'src'),
+        exclude: /(node_modules|bower_components|build)/,
+        use: 'babel-loader'
+      }
+    ]
+  }
+};