added docz

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 dist
-coverage
+coverage
+.docz

docs/Components/GlobalEventComponent.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import useKey from '../../src/useKeyCapture';
+import './styles.css';
+
+const displayKeys = ['Enter', 'Escape', 'Tab', 'ArrowUp'];
+
+const GlobalComponent = () => {
+  const { keyData } = useKey();
+
+  const getIsActive = key => (keyData.key === key ? 'active' : '');
+
+  const getCombinedActiveClass = () =>
+    keyData.key === 'A' && keyData.isWithShift ? 'active' : '';
+
+  return (
+    <>
+      <div className="message">
+        Press below mentioned keys to see the hook in action
+      </div>
+      <div className="container">
+        {displayKeys.map(key => {
+          return <div className={`box ${getIsActive(key)}`}>{key}</div>;
+        })}
+        <div className={`box ${getCombinedActiveClass()}`}>Shift + A</div>
+      </div>
+    </>
+  );
+};
+
+export default GlobalComponent;

docs/Components/TargetEventComponent.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import useKey from '../../src/useKeyCapture';
+import './styles.css';
+
+const displayKeys = ['Q', 'W', 'E', 'R', 'T', 'Y', 'Backspace'];
+
+const TargetEventComponent = () => {
+  const { keyData, getTargetProps } = useKey();
+
+  const getIsActive = key => (keyData.key === key ? 'active' : '');
+
+  return (
+    <div className="container-target">
+      <div className="message">
+        Type QWERTY in the input element below. If the focus outside the target,
+        we won't see any change.
+      </div>
+      <input {...getTargetProps()} />
+      <div className="container">
+        {displayKeys.map(key => {
+          return <div className={`box ${getIsActive(key)}`}>{key}</div>;
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default TargetEventComponent;

docs/Components/styles.css

@@ -0,0 +1,62 @@
+.box {
+  height: 100px;
+  width: 100px;
+  margin: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 4px solid #b8e994;
+  border-radius: 4px;
+  transition: 0.3s all ease-in-out;
+  background: #ffffff;
+}
+
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 200px;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  background: #5f3ccf;
+}
+
+.container-target .container {
+  border: none;
+}
+.container-target .message {
+  color: #fff;
+  margin: 48px;
+}
+
+.container-target input {
+  width: 500px;
+  height: 50px;
+  background: #977af7;
+  border: none;
+  outline: none;
+  font-size: 48px;
+  line-height: 50px;
+  color: #fff;
+  text-align: center;
+  padding: 8px;
+  border-radius: 8px;
+}
+
+.container-target {
+  background: #5f3ccf;
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  align-items: center;
+  border-radius: 8px;
+}
+
+.box.active {
+  background: #78e08f;
+  color: #ffffff;
+}
+
+.message {
+  text-align: center;
+}

docs/index.mdx

@@ -0,0 +1,44 @@
+---
+name: Docs
+route: /
+order: 1
+---
+
+# use-key-capture
+
+use-key-capture is a custom hook which will let us not to worry about the key-press event. Just plugin in use-key-capture hook to the **target** we want to listen for key press event or by default it can listen for key-press event **globally**.
+
+## Installation
+
+**npm**
+
+```bash
+npm i use-key-capture
+```
+
+**yarn**
+
+```bash
+yarn add use-key-capture
+```
+
+## How it is used
+
+```jsx
+import useKey from 'use-key-capture';
+...
+const { keyData, resetKeyData, getTargetProps } = useKey();
+```
+
+## Properties
+
+| Property name | Description                    |
+| ------------- | ------------------------------ |
+| keyData       | gives pressed key details      |
+| resetKeyData  | resets the pressed key details |
+
+## Target Prop getter
+
+| Property name  | Description                                |
+| -------------- | ------------------------------------------ |
+| getTargetProps | gives the required props to target element |

docs/pages/demo.mdx

@@ -0,0 +1,91 @@
+---
+name: Demo
+route: /demo
+order: 2
+---
+
+import { Playground } from 'docz';
+import GlobalComponent from '../Components/GlobalEventComponent.js';
+import TargetEventComponent from '../Components/TargetEventComponent.js';
+
+## Target Listener
+
+Listen only for the key-press event for a particular target.
+
+It is provided by `getTargetProps` props getter. If `getTargetProps` props getter is not provided, then it will listen for key-press event globally.
+
+```jsx
+<input {...getTargetProps()} />
+```
+
+<TargetEventComponent />
+
+```jsx
+import React from 'react';
+import useKey from 'use-key-capture';
+import './styles.css';
+
+const displayKeys = ['Q', 'W', 'E', 'R', 'T', 'Y', 'Backspace'];
+
+const TargetEventComponent = () => {
+  const { keyData, getTargetProps } = useKey();
+
+  const getIsActive = key => (keyData.key === key ? 'active' : '');
+
+  return (
+    <div className="container-target">
+      <div className="message">
+        Type QWERTY in the input element below. If the focus outside the target,
+        we won't see any change.
+      </div>
+      <input {...getTargetProps()} />
+      <div className="container">
+        {displayKeys.map(key => {
+          return <div className={`box ${getIsActive(key)}`}>{key}</div>;
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default TargetEventComponent;
+```
+
+## Global Listener
+
+If no target is specified, it will listen for global event.
+
+<GlobalComponent />
+
+```jsx
+import React from 'react';
+import useKey from 'use-key-capture';
+import './styles.css';
+
+const displayKeys = ['Enter', 'Escape', 'Tab', 'ArrowUp'];
+
+const GlobalComponent = () => {
+  const { keyData } = useKey();
+
+  const getIsActive = key => (keyData.key === key ? 'active' : '');
+
+  const getCombinedActiveClass = () =>
+    keyData.key === 'A' && keyData.isWithShift ? 'active' : '';
+
+  return (
+    <>
+      <div className="message">
+        Press below mentioned keys to see the hook in action
+      </div>
+      <div className="container">
+        {displayKeys.map(key => {
+          return <div className={`box ${getIsActive(key)}`}>{key}</div>;
+        })}
+        <div className={`box ${getCombinedActiveClass()}`}>Shift + A</div>
+      </div>
+    </>
+  );
+};
+
+export default GlobalComponent;
+```

jest.config.js

@@ -4,7 +4,10 @@ const ignores = [
   '/fixtures/',
   '/__tests__/helpers/',
   '/__tests__/utils/',
-  '__mocks__'
+  '__mocks__',
+  'docz',
+  '.docz',
+  'dist'
 ];
 
 module.exports = {

package.json

@@ -9,7 +9,12 @@
     "postpublish": "git push --tags",
     "test": "jest --config=jest.config.js",
     "test:watch": "jest --config=jest.config.js --watch",
-    "test:coverage": "jest --config=jest.config.js --coverage && open coverage/Icov-report/index.html"
+    "test:coverage": "jest --config=jest.config.js --coverage && open coverage/Icov-report/index.html",
+    "docz:dev": "docz dev",
+    "docz:build": "docz build",
+    "docz:serve": "docz build && docz serve",
+    "predeploy": "yarn test && yarn docz:build",
+    "deploy": "gh-pages -d .docz/dist/"
   },
   "devDependencies": {
     "@babel/cli": "^7.7.7",
@@ -20,6 +25,8 @@
     "@testing-library/jest-dom": "^5.0.0",
     "@testing-library/react": "^9.4.0",
     "@testing-library/react-hooks": "^3.2.1",
+    "docz": "^2.2.0",
+    "gh-pages": "^2.2.0",
     "husky": "^4.2.1",
     "jest": "^24.9.0",
     "react-test-renderer": "^16.12.0",
@@ -37,7 +44,7 @@
   },
   "browserslist": "> 0.25%, not dead",
   "author": "Pranesh T G",
-  "homepage": "https://github.com/pranesh239/use-key-capture#readme",
+  "homepage": "http://pranesh239.github.io/use-key-capture",
   "bugs": {
     "url": "https://github.com/pranesh239/use-key-capture/issues"
   }

src/__tests__/props.test.js

@@ -9,14 +9,14 @@ describe('useKeyCapture', () => {
       const { result } = setUpHook();
       expect(result.current.keyData).toBeTruthy();
       expect(result.current.resetKeyData).toBeTruthy();
-      expect(result.current.targetPropsGetter).toBeTruthy();
+      expect(result.current.getTargetProps).toBeTruthy();
     });
   });
 
   describe('prop getters', () => {
     it('are returned as functions', () => {
       const { result } = setUpHook();
-      expect(result.current.targetPropsGetter).toBeInstanceOf(Function);
+      expect(result.current.getTargetProps).toBeInstanceOf(Function);
       expect(result.current.resetKeyData).toBeInstanceOf(Function);
     });
   });

src/__tests__/utils/TestComponent.js

@@ -2,7 +2,7 @@ import React, { useRef, useEffect } from 'react';
 import useKey from '../../useKeyCapture';
 
 const TestComponent = () => {
-  const { keyData, targetPropsGetter } = useKey();
+  const { keyData, getTargetProps } = useKey();
 
   const inputRef = useRef(null);
 
@@ -14,7 +14,7 @@ const TestComponent = () => {
     <div>
       <input
         data-testid="input"
-        {...targetPropsGetter({
+        {...getTargetProps({
           ref: inputRef
         })}
       />

src/useKeyCapture/index.js

@@ -47,7 +47,7 @@ function useKeys() {
     };
   }, []);
 
-  const targetPropsGetter = ({ ref, type } = {}) => {
+  const getTargetProps = ({ ref, type } = {}) => {
     return {
       type: type || targetItemPropsDefaultValue.type,
       ref: handleRefAssignment(ref, targetItemNode => {
@@ -56,7 +56,7 @@ function useKeys() {
     };
   };
 
-  return { keyData, resetKeyData, targetPropsGetter };
+  return { keyData, resetKeyData, getTargetProps };
 }
 
 export default useKeys;

src/useKeyCapture/useKeyCaptureUtils.js

@@ -83,7 +83,7 @@ const isCapitalLetterPressed = key => /^[A-Z]$/.test(key);
 const isSmallLetterPressed = key => /^[a-z]$/.test(key);
 const isNumberPressed = key => /^[0-9]/.test(key);
 const isSpecialCharacter = key =>
-  /^[!@#$%^&*()_+<>?:"{}[\]';.,\|/\-\\=_\+~`]/.test(key);
+  /^[!@#$%^&*()_+<>?:"{}[\]';.,|/\-\\=_+~`]/.test(key);
 
 const isSpecialCharacterPressed = key => {
   return (