diff --git a/website/App.js b/website/App.js index a5f8bf1..7a2c4df 100644 --- a/website/App.js +++ b/website/App.js @@ -70,11 +70,8 @@ export default class App extends Component {
HotKeys.js
- - - - - + + @@ -92,14 +89,14 @@ export default class App extends Component { /> -
+
) } diff --git a/website/components/Footer.js b/website/components/Footer.js index 08e14e0..8328f03 100644 --- a/website/components/Footer.js +++ b/website/components/Footer.js @@ -3,6 +3,11 @@ import style from './Footer.less'; export default function Footer({ name, href, year}) { return ( -
© {name} {year}
+
+
Licensed under MIT. (Yes it's free and open-sourced)
+
+ © {name} {year} +
+
) } \ No newline at end of file diff --git a/website/components/Footer.less b/website/components/Footer.less index 4193f7b..af5be72 100644 --- a/website/components/Footer.less +++ b/website/components/Footer.less @@ -2,4 +2,5 @@ text-align: center; padding: 15px 0 100px 0; font-size: 12px; + line-height: 20px; } \ No newline at end of file diff --git a/website/components/KeyBoard.less b/website/components/KeyBoard.less index 77be9e1..e0ca764 100644 --- a/website/components/KeyBoard.less +++ b/website/components/KeyBoard.less @@ -31,6 +31,7 @@ border-radius: 8px; border: 1px solid #3A3A3A; box-shadow: 1px 0px 0px rgb(0,0,0),0px 1px 0px rgb(0,0,0),-1px 0px 0px rgb(0,0,0),0px -1px 0px rgb(0,0,0); + transition: all .2s; user-select: none; cursor: pointer; position: relative; diff --git a/website/components/Markdown/styles/default.less b/website/components/Markdown/styles/default.less index 2e0a4e2..f3c3d2f 100644 --- a/website/components/Markdown/styles/default.less +++ b/website/components/Markdown/styles/default.less @@ -31,6 +31,9 @@ pre { background-color: #F0F0F0; border-radius: 3px; } +del { + color: #888; +} pre code { background: none; font-size: 1em; @@ -57,7 +60,10 @@ a { color: #0366d6; } p { - margin-bottom: 10px; + margin-bottom: 16px; +} +table { + margin-bottom: 16px; } blockquote { margin: 0; diff --git a/website/doc.md b/website/doc.md index a443d28..e6b879f 100644 --- a/website/doc.md +++ b/website/doc.md @@ -1,7 +1,17 @@ -HotKeys.js is an input capture library with some very special features, it is easy to pick up and use, has a reasonable footprint (~3kb), and has no dependencies. It should not interfere with any JavaScript libraries or frameworks. +HotKeys.js is an input capture library with some very special features, it is easy to pick up and use, has a reasonable footprint (~3kb) (gzipped: 1.73kb), and has no dependencies. It should not interfere with any JavaScript libraries or frameworks. -## USAGE +[![](https://img.shields.io/github/issues/jaywcjlove/hotkeys.svg)](https://github.com/jaywcjlove/hotkeys/issues) [![](https://img.shields.io/github/forks/jaywcjlove/hotkeys.svg)](https://github.com/jaywcjlove/hotkeys/network) [![](https://img.shields.io/github/stars/jaywcjlove/hotkeys.svg)](https://github.com/jaywcjlove/hotkeys/stargazers) [![](https://img.shields.io/github/release/jaywcjlove/hotkeys.svg)](https://github.com/jaywcjlove/hotkeys/releases) ![](http://jaywcjlove.github.io/sb/status/no-dependencies.svg) + +```bash + __ __ __ + | |--..-----.| |_ | |--..-----..--.--..-----. + | || _ || _|| < | -__|| | ||__ --| + |__|__||_____||____||__|__||_____||___ ||_____| + |_____| +``` + +## Usage You will need `Node.js` installed on your system. @@ -9,13 +19,13 @@ You will need `Node.js` installed on your system. $ npm install hotkeys-js --save ``` -``` +```js import hotkeys from 'hotkeys-js'; ``` Or manually download and link **hotkeys.js** in your HTML: -```js +```html ``` @@ -29,6 +39,37 @@ $ npm install react-hot-keys --save Detailed use method please see its documentation [react-hotkeys](https://github.com/jaywcjlove/react-hotkeys). +```jsx +import React, { Component } from 'react'; +import Hotkeys from 'react-hot-keys'; + +export default class HotkeysDemo extends Component { + constructor(props) { + super(props); + this.state = { + output: 'Hello, I am a component that listens to keydown and keyup of a', + } + } + onKeyUp(keyNm, e, handle) { + this.setState({output: keyNm}) + } + onKeyDown(keyName, e, handle) { + this.setState({output: keyNm}) + } + render() { + return ( + +
{this.state.output}
+ + ) + } +} +``` + ## Browser Support Mousetrap has been tested and should work in. @@ -40,7 +81,7 @@ Firefox Chrome ``` -## DEFINING SHORTCUTS +## Defining Shortcuts One global method is exposed, key which defines shortcuts when called directly. @@ -197,7 +238,7 @@ hotkeys() // @ VM2165:816InjectedScript.evaluate @ VM2165:682 ``` -### SUPPORTED KEYS +## Supported Keys HotKeys understands the following modifiers: `⇧`, `shift`, `option`, `⌥`, `alt`, `ctrl`, `control`, `command`, and `⌘`. @@ -233,14 +274,13 @@ Run Document Website Environment. $ npm run doc:dev ``` +To contribute, please fork Hotkeys.js, add your patch and tests for it (in the `test/` folder) and submit a pull request. + +```shell +$ npm run test +$ npm run test:watch # Development model +``` + ## License [MIT © Kenny Wong](https://kossnocorp.mit-license.org/) - -```bash - __ __ __ - | |--..-----.| |_ | |--..-----..--.--..-----. - | || _ || _|| < | -__|| | ||__ --| - |__|__||_____||____||__|__||_____||___ ||_____| - |_____| -``` \ No newline at end of file