Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Johannes Klauss
committed
Feb 20, 2019
1 parent
dc872d8
commit 89cd566
Showing
16 changed files
with
6,897 additions
and
1,840 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,7 @@ | ||
.idea/ | ||
.cache/ | ||
.idea | ||
node_modules | ||
pkg | ||
.docz | ||
|
||
# Logs | ||
logs | ||
|
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
--- | ||
name: Introduction | ||
route: / | ||
order: 1 | ||
--- | ||
|
||
# Introduction | ||
|
||
**React Hotkeys Hook** - Hotkeys module turned into hooks. | ||
Read about the [hooks](https://reactjs.org/docs/hooks-intro.html) feature. | ||
|
||
This is a hook version for the [hotkeys](https://github.com/jaywcjlove/hotkeys) module. | ||
|
||
## Install | ||
|
||
> Note: React 16.8+ is required for Hooks. | ||
### With npm | ||
|
||
```sh | ||
npm i react-hotkeys-hook | ||
``` | ||
|
||
### Or with yarn | ||
|
||
```sh | ||
yarn add react-hotkeys-hook | ||
``` | ||
|
||
exposed as `useHotkeys`. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,51 @@ | ||
--- | ||
name: useHotkeys | ||
--- | ||
|
||
import { Playground } from 'docz'; | ||
import { useState } from 'react'; | ||
import { useHotkeys } from '../src'; | ||
|
||
# useHotkeys | ||
|
||
The `useHotkeys` hook follows the hotkeys call signature. | ||
The callback function takes the exact parameters as the callback function in the hotkeys package. | ||
See hotkeys documentation for more info or look into the typings file. | ||
|
||
```ts | ||
useHotkeys(keys: string, callback: (event: KeyboardEvent, handler: HotkeysEvent) => void) | ||
``` | ||
|
||
## Example | ||
|
||
This will listen to the `ctrl+k` keystroke. If you press it, the counter will go up. | ||
|
||
```js | ||
import { useHotkeys } from 'react-hotkeys-hook'; | ||
``` | ||
|
||
```jsx | ||
const ExampleComponent = () => { | ||
const [count, setCount] = useState(0); | ||
useHotkeys('ctrl+k', () => setCount(count + 1)); | ||
|
||
return ( | ||
<div> | ||
Pressed {count} times. | ||
</div> | ||
); | ||
}; | ||
``` | ||
|
||
<Playground> | ||
{() => { | ||
const [count, setCount] = useState(0); | ||
useHotkeys('ctrl+k', () => setCount(count + 1)) | ||
|
||
return ( | ||
<div> | ||
Pressed {count} times. | ||
</div> | ||
); | ||
}} | ||
</Playground> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
import pkg from './package.json'; | ||
|
||
export default { | ||
title: 'React Hotkeys Hook', | ||
description: pkg.description, | ||
base: `/${pkg.name}/`, | ||
version: pkg.version, | ||
propsParser: false, | ||
hashRouter: true, | ||
typescript: true, | ||
themeConfig: { | ||
colors: { | ||
primary: '#000000', | ||
}, | ||
}, | ||
}; |
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,30 +1,56 @@ | ||
{ | ||
"name": "react-hotkeys-hook", | ||
"version": "1.0.3", | ||
"main": "dist/index.js", | ||
"typings": "dist/index.d.ts", | ||
"repository": "https://JohannesKlauss@github.com/JohannesKlauss/react-keymap-hook.git", | ||
"author": "Johannes Klauss", | ||
"keywords": ["react", "hook", "component", "hotkey", "shortcut", "keyboard", "shortcuts", "keypress", "hotkeys"], | ||
"keywords": ["react", "hook", "hooks", "component", "hotkey", "shortcut", "keyboard", "shortcuts", "keypress", "hotkeys"], | ||
"license": "MIT", | ||
"scripts": { | ||
"dev": "parcel example/index.html", | ||
"build": "parcel build src/index.ts" | ||
"build": "pack build", | ||
"publish": "pack publish", | ||
"docz:dev": "docz dev", | ||
"docz:build": "docz build" | ||
}, | ||
"babel": { | ||
"presets": [ | ||
"@babel/preset-env", | ||
"@babel/preset-typescript", | ||
"@babel/preset-react" | ||
] | ||
}, | ||
"@pika/pack": { | ||
"pipeline": [ | ||
["@pika/plugin-ts-standard-pkg"], | ||
["@pika/plugin-build-node"], | ||
["@pika/plugin-build-web"], | ||
["@pika/plugin-build-types"] | ||
] | ||
}, | ||
"dependencies": { | ||
"hotkeys-js": "^3.4.4" | ||
}, | ||
"devDependencies": { | ||
"@babel/core": "7.3.3", | ||
"@types/react": "16.8.3", | ||
"@babel/preset-env": "7.3.1", | ||
"@babel/preset-react": "7.0.0", | ||
"@babel/preset-typescript": "7.3.3", | ||
"@pika/pack": "0.3.2", | ||
"@pika/plugin-build-node": "0.3.11", | ||
"@pika/plugin-build-web": "0.3.11", | ||
"@pika/plugin-build-types": "0.3.11", | ||
"@pika/plugin-ts-standard-pkg": "0.3.10", | ||
"@types/react": "16.8.4", | ||
"@types/react-dom": "16.8.2", | ||
"babel-loader": "8.0.5", | ||
"parcel-bundler": "1.11.0", | ||
"docz": "0.13.7", | ||
"docz-theme-default": "0.12.9", | ||
"typescript": "3.3.3", | ||
"react": "16.8.2", | ||
"react-dom": "16.8.2" | ||
}, | ||
"peerDependencies": { | ||
"react": ">=16.8.0" | ||
"react": ">=16.8.1" | ||
}, | ||
"resolutions": { | ||
"@types/react": "^16.8.4" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,35 +1,11 @@ | ||
{ | ||
"compilerOptions": { | ||
"allowSyntheticDefaultImports": true, | ||
"declaration": true, | ||
"declarationDir": "dist", | ||
"emitDecoratorMetadata": false, | ||
"experimentalDecorators": false, | ||
"esModuleInterop": true, | ||
"importHelpers": true, | ||
"module": "commonjs", | ||
"target": "es2018", | ||
"module": "esnext", | ||
"moduleResolution": "node", | ||
"noFallthroughCasesInSwitch": true, | ||
"noImplicitAny": true, | ||
"noImplicitReturns": true, | ||
"noImplicitThis": true, | ||
"noUnusedLocals": true, | ||
"noUnusedParameters": true, | ||
"outDir": "dist", | ||
"pretty": true, | ||
"removeComments": true, | ||
"sourceMap": true, | ||
"jsx": "react", | ||
"strict": true, | ||
"strictNullChecks": true, | ||
"stripInternal": true, | ||
"target": "es5", | ||
"jsx": "react" | ||
"allowSyntheticDefaultImports": true | ||
}, | ||
"include": [ | ||
"src" | ||
], | ||
"exclude": [ | ||
"node_modules", | ||
"dist" | ||
] | ||
} | ||
"include": ["src"] | ||
} |
Oops, something went wrong.