30 | Press s to toggle the menu.
31 |
20 | Press s to open the menu.
21 |
20 | Press s to toggle the menu.
21 |
= [undefined, undefined, undefined];
17 | const elements = undefCodes
18 | .concat(codes)
19 | .reverse()
20 | .slice(0, 3)
21 | .map((code, i) => {
22 | if (code === undefined) {
23 | return ... ;
24 | }
25 | return (
26 |
27 | {code.code} => {code.value}
28 |
29 | );
30 | });
31 |
32 | return (
33 |
34 |
35 | Input
36 | KeyboardEvent
37 |
38 | .code
39 | and .value
40 | explore:
41 |
42 |
43 |
44 |
45 | Last 3 values (code => value):
46 | {elements}
47 |
48 | );
49 | }
50 |
51 | handleKeyPress = (e: SyntheticKeyboardEvent) => {
52 | const { codes } = this.state;
53 |
54 | codes.push({
55 | // $FlowFixMe
56 | code: e.nativeEvent.code,
57 | value: e.key,
58 | });
59 | if (codes.length > 3) {
60 | codes.shift();
61 | }
62 |
63 | this.setState({ codes });
64 | };
65 | }
66 |
--------------------------------------------------------------------------------
/demo/components/examples/input/default.js:
--------------------------------------------------------------------------------
1 | /* @flow */
2 |
3 | import React from 'react';
4 | import SyntaxHighlighter from 'react-syntax-highlighter/prism';
5 | import { light } from 'react-syntax-highlighter/styles/prism';
6 |
7 | import { keyToggleHandler, KEYPRESS } from '../../../../lib';
8 | import ExampleBox from '../ExampleBox';
9 |
10 | type Props = {
11 | keyValue: ?string,
12 | };
13 |
14 | function Default({ keyValue }: Props) {
15 | return (
16 |
17 | Input example:
18 |
19 |
20 | Press s in the following form component and see that the
21 | key handle will be ignored by default.
22 |
23 |
24 |
25 |
26 | {keyValue === 's' && (
27 |
28 | - hello
29 | - world
30 |
31 | )}
32 |
33 | Code:
34 |
35 | {codeString}
36 |
37 |
38 | );
39 | }
40 |
41 | const codeString = `
42 | keyToggleHandler({ keyEventName: KEYPRESS, keyValue: 's' })(
43 | Component,
44 | );
45 | `;
46 |
47 | export default keyToggleHandler({ keyEventName: KEYPRESS, keyValue: 's' })(
48 | Default,
49 | );
50 |
--------------------------------------------------------------------------------
/demo/components/examples/input/keypress.js:
--------------------------------------------------------------------------------
1 | /* @flow */
2 |
3 | import React from 'react';
4 | import ExampleBox from '../ExampleBox';
5 | import SyntaxHighlighter from 'react-syntax-highlighter/prism';
6 | import { light } from 'react-syntax-highlighter/styles/prism';
7 |
8 | type State = {
9 | keyValue: ?string,
10 | };
11 |
12 | export default class Keypress extends React.Component<{||}, State> {
13 | state: State = { keyValue: null };
14 |
15 | render() {
16 | return (
17 |
18 | Input onKeyPress example:
19 |
20 |
21 | Press s in the following form component to toggle the
22 | menu.
23 |
24 |
25 |
26 |
27 | {this.state.keyValue === 's' && (
28 |
29 | - hello
30 | - world
31 |
32 | )}
33 |
34 | Code:
35 |
36 | {codeString}
37 |
38 |
39 | );
40 | }
41 |
42 | handleKeyPress = ({ key }: SyntheticKeyboardEvent) => {
43 | const keyValue = this.state.keyValue === key ? null : key;
44 |
45 | this.setState({ keyValue });
46 | };
47 | }
48 |
49 | const codeString = `
50 | state: State = { keyValue: null };
51 |
52 | render() {
53 | ...
54 |
55 | ...
56 | }
57 |
58 | handleKeyPress = ({ key }) => {
59 | const keyValue = this.state.keyValue === key ? null : key;
60 |
61 | this.setState({ keyValue });
62 | };
63 | `;
64 |
--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | react-key-handler
5 |
6 |
7 |
8 |
9 |
10 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
--------------------------------------------------------------------------------
/demo/main.js:
--------------------------------------------------------------------------------
1 | /* @flow */
2 |
3 | import App from './components/app';
4 | import React from 'react';
5 | import ReactDOM from 'react-dom';
6 |
7 | /**
8 | * Render the application.
9 | */
10 |
11 | const root = document.getElementById('app');
12 | if (!root) throw new Error('No app id in document');
13 |
14 | ReactDOM.render(,
12 | keyCode: ?primitiveOrArray,
13 | code: ?primitiveOrArray,
14 | |};
15 |
16 | export type DecoratorProps = {|
17 | keyValue: ?primitiveOrArray,
18 | keyCode: ?primitiveOrArray,
19 | code: ?primitiveOrArray,
20 | keyEventName?: KeyConstants,
21 | |};
22 |
23 | export default function keyHandleDecorator(
24 | matcher?: typeof matchesKeyboardEvent,
25 | ): Function {
26 | return (props?: DecoratorProps & T): Function => {
27 | const { keyValue, keyCode, code, keyEventName } = props || {};
28 |
29 | return Component =>
30 | class KeyHandleDecorator extends React.Component<
31 | T,
32 | KeyhandleDecoratorState,
33 | > {
34 | state: KeyhandleDecoratorState = {
35 | keyCode: null,
36 | keyValue: null,
37 | code: null,
38 | };
39 |
40 | render() {
41 | return (
42 |
43 |
52 | );
53 | }
54 |
55 | handleKey = (event: KeyboardEvent): void => {
56 | if (matcher && matcher(event, this.state)) {
57 | this.setState({ keyValue: null, keyCode: null });
58 | return;
59 | }
60 |
61 | this.setState({ keyValue: eventKey(event), keyCode: event.keyCode });
62 | };
63 | };
64 | };
65 | }
66 |
67 | export const keyHandler = keyHandleDecorator();
68 | export const keyToggleHandler = keyHandleDecorator(matchesKeyboardEvent);
69 |
--------------------------------------------------------------------------------
/lib/key-handler.js:
--------------------------------------------------------------------------------
1 | /* @flow */
2 |
3 | import React from 'react';
4 | import PropTypes from 'prop-types';
5 | import { canUseDOM } from 'exenv';
6 |
7 | import { KEYDOWN, KEYPRESS, KEYUP, type KeyConstants } from './constants';
8 | import { type primitiveOrArray } from './types';
9 | import { isInput, matchesKeyboardEvent } from './utils';
10 |
11 | type Props = {|
12 | +keyValue?: ?primitiveOrArray,
13 | +keyCode?: ?primitiveOrArray,
14 | +code?: ?primitiveOrArray,
15 | +keyEventName: KeyConstants,
16 | +onKeyHandle?: (event: KeyboardEvent) => mixed,
17 | |};
18 |
19 | export default class KeyHandler extends React.Component {
20 | static propTypes = {
21 | keyValue: PropTypes.oneOfType([
22 | PropTypes.string,
23 | PropTypes.arrayOf(PropTypes.string),
24 | ]),
25 | keyCode: PropTypes.oneOfType([
26 | PropTypes.number,
27 | PropTypes.arrayOf(PropTypes.number),
28 | ]),
29 | code: PropTypes.oneOfType([
30 | PropTypes.string,
31 | PropTypes.arrayOf(PropTypes.string),
32 | ]),
33 | keyEventName: PropTypes.oneOf([KEYDOWN, KEYPRESS, KEYUP]),
34 | onKeyHandle: PropTypes.func,
35 | };
36 |
37 | static defaultProps = {
38 | keyEventName: KEYUP,
39 | };
40 |
41 | shouldComponentUpdate(): boolean {
42 | return false;
43 | }
44 |
45 | constructor(props: Props) {
46 | super(props);
47 |
48 | /* eslint-disable no-console */
49 | if (props.keyCode) {
50 | console.warn(
51 | 'Warning: Deprecated propType: `keyCode` is deprecated in favour of `code` for `KeyHandler`.',
52 | );
53 | }
54 |
55 | if (!props.keyValue && !props.keyCode && !props.code) {
56 | console.error(
57 | 'Warning: Failed propType: Missing prop `code`, `keyValue` or `keyCode` for `KeyHandler`.',
58 | );
59 | }
60 |
61 | /* eslint-enable */
62 | }
63 |
64 | componentDidMount(): void {
65 | if (!canUseDOM) return;
66 |
67 | window.document.addEventListener(this.props.keyEventName, this.handleKey);
68 | }
69 |
70 | componentWillUnmount(): void {
71 | if (!canUseDOM) return;
72 |
73 | window.document.removeEventListener(
74 | this.props.keyEventName,
75 | this.handleKey,
76 | );
77 | }
78 |
79 | render(): null {
80 | return null;
81 | }
82 |
83 | handleKey = (event: KeyboardEvent): void => {
84 | const { keyValue, keyCode, code, onKeyHandle } = this.props;
85 |
86 | if (!onKeyHandle) {
87 | return;
88 | }
89 |
90 | const { target } = event;
91 |
92 | if (target instanceof window.HTMLElement && isInput(target)) {
93 | return;
94 | }
95 |
96 | if (!matchesKeyboardEvent(event, { keyValue, keyCode, code })) {
97 | return;
98 | }
99 |
100 | onKeyHandle(event);
101 | };
102 | }
103 |
--------------------------------------------------------------------------------
/lib/types.js:
--------------------------------------------------------------------------------
1 | /* @flow */
2 | export type primitiveOrArray = T | T[];
3 |
--------------------------------------------------------------------------------
/lib/utils.js:
--------------------------------------------------------------------------------
1 | /* @flow */
2 | import {
3 | KEYDOWN,
4 | KEYPRESS,
5 | KEYUP,
6 | KEY_CODE_KEYS,
7 | NORMALIZED_KEYS,
8 | } from './constants';
9 | import { type primitiveOrArray } from './types';
10 |
11 | type KeyboardKey = {|
12 | +keyValue: ?primitiveOrArray,
13 | +keyCode: ?primitiveOrArray,
14 | +code: ?primitiveOrArray,
15 | |};
16 |
17 | /**
18 | * Check if `given` element is an input / textarea form element or acts as one.
19 | */
20 |
21 | export function isInput(element: HTMLElement): boolean {
22 | if (!element) {
23 | return false;
24 | }
25 |
26 | const { tagName } = element;
27 | const editable = isContentEditable(element);
28 |
29 | return tagName === 'INPUT' || tagName === 'TEXTAREA' || editable;
30 | }
31 |
32 | function isContentEditable(element: HTMLElement): boolean {
33 | if (typeof element.getAttribute !== 'function') {
34 | return false;
35 | }
36 |
37 | return !!element.getAttribute('contenteditable');
38 | }
39 |
40 | /**
41 | * Matches an event against a given keyboard key.
42 | */
43 |
44 | function matchesElementOrArray(a: T | T[], b: T) {
45 | if (Array.isArray(a)) {
46 | return a.includes(b);
47 | }
48 | return a === b;
49 | }
50 |
51 | export function matchesKeyboardEvent(
52 | event: KeyboardEvent,
53 | { keyCode, keyValue, code }: KeyboardKey,
54 | ): boolean {
55 | if (!isNullOrUndefined(keyValue)) {
56 | const value = eventKey(event);
57 | if (matchesElementOrArray(keyValue, value)) {
58 | return true;
59 | }
60 | }
61 |
62 | if (!isNullOrUndefined(code)) {
63 | if (matchesElementOrArray(code, event.code)) {
64 | return true;
65 | }
66 | }
67 |
68 | if (!isNullOrUndefined(keyCode)) {
69 | // Firefox handles keyCode through which
70 | const keyCodeTarget = event.keyCode || event.which;
71 | if (matchesElementOrArray(keyCode, keyCodeTarget)) {
72 | return true;
73 | }
74 | }
75 |
76 | return false;
77 | }
78 |
79 | function isNullOrUndefined(value): boolean {
80 | return value === undefined || value === null;
81 | }
82 |
83 | export function eventKey(event: KeyboardEvent): string {
84 | const { key, keyCode, type } = event;
85 |
86 | if (key) {
87 | const normalizedKey = NORMALIZED_KEYS[key] || key;
88 |
89 | if (normalizedKey !== 'Unidentified') {
90 | return normalizedKey;
91 | }
92 | }
93 |
94 | if (type === KEYPRESS) {
95 | const charCode = eventCharCode(event);
96 |
97 | return charCode === 13 ? 'Enter' : String.fromCharCode(charCode);
98 | }
99 |
100 | if (type === KEYDOWN || type === KEYUP) {
101 | return KEY_CODE_KEYS[String(keyCode)] || 'Unidentified';
102 | }
103 |
104 | return '';
105 | }
106 |
107 | function eventCharCode(event: KeyboardEvent): number {
108 | let { charCode, keyCode } = event;
109 |
110 | if ('charCode' in event) {
111 | if (charCode === 0 && keyCode === 13) {
112 | return 13;
113 | }
114 | } else {
115 | charCode = keyCode;
116 | }
117 |
118 | if (charCode >= 32 || charCode === 13) {
119 | return charCode;
120 | }
121 |
122 | return 0;
123 | }
124 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-key-handler",
3 | "version": "1.2.0-beta.3",
4 | "description": "React component to handle keyboard events",
5 | "homepage": "https://github.com/ayrton/react-key-handler",
6 | "author": {
7 | "name": "Ayrton De Craene",
8 | "email": "im@ayrton.be",
9 | "url": "https://github.com/ayrton"
10 | },
11 | "license": "MIT",
12 | "repository": {
13 | "type": "git",
14 | "url": "git://github.com/ayrton/react-key-handler.git"
15 | },
16 | "bugs": {
17 | "url": "https://github.com/ayrton/react-key-handler/issues"
18 | },
19 | "main": "dist/cjs/index.js",
20 | "module": "dist/esm/index.js",
21 | "scripts": {
22 | "build": "npm run build:clean && npm run build:bundle && npm run build:flow",
23 | "build:clean": "rimraf dist",
24 | "build:bundle": "rollup -c",
25 | "build:flow": "flow-copy-source lib dist/cjs",
26 | "demo": "parcel ./demo/index.html",
27 | "demo:build": "parcel build demo/index.html --out-dir demo/dist --public-url=/react-key-handler",
28 | "demo:deploy": "npm run demo:build && gh-pages -d demo/dist",
29 | "prepublish": "npm run build",
30 | "test": "npm run test:lint && npm run test:unit && npm run test:flow",
31 | "test:flow": "flow check",
32 | "test:lint": "eslint demo/ lib/ test/",
33 | "test:unit": "mocha"
34 | },
35 | "keywords": [
36 | "react",
37 | "reactjs",
38 | "key",
39 | "event",
40 | "handler"
41 | ],
42 | "devDependencies": {
43 | "babel-core": "^6.26.3",
44 | "babel-eslint": "^9.0.0",
45 | "babel-loader": "^8.0.0",
46 | "babel-plugin-external-helpers": "^6.22.0",
47 | "babel-plugin-transform-class-properties": "^6.24.1",
48 | "babel-preset-env": "^1.7.0",
49 | "babel-preset-react": "^6.11.0",
50 | "babel-preset-stage-1": "^6.13.0",
51 | "chai": "^4.1.2",
52 | "chai-enzyme": "^1.0.0-beta.1",
53 | "enzyme": "^3.3.0",
54 | "enzyme-adapter-react-16": "^1.1.1",
55 | "eslint": "^5.4.0",
56 | "eslint-config-prettier": "^3.0.1",
57 | "eslint-plugin-prettier": "^2.6.2",
58 | "eslint-plugin-react": "^7.11.1",
59 | "flow-bin": "^0.79.1",
60 | "flow-copy-source": "^2.0.2",
61 | "gh-pages": "^1.2.0",
62 | "jsdom": "^11.12.0",
63 | "mocha": "^5.2.0",
64 | "parcel-bundler": "^1.9.7",
65 | "prettier": "^1.14.2",
66 | "react": "^16.4.2",
67 | "react-dom": "^16.4.2",
68 | "react-syntax-highlighter": "^8.0.1",
69 | "rimraf": "^2.6.2",
70 | "rollup": "^0.63.5",
71 | "rollup-plugin-babel": "^3.0.7",
72 | "rollup-plugin-node-resolve": "^3.3.0",
73 | "rollup-plugin-replace": "^2.0.0",
74 | "rollup-plugin-size-snapshot": "^0.6.1",
75 | "rollup-plugin-terser": "^1.0.1",
76 | "sinon": "^6.1.4"
77 | },
78 | "peerDependencies": {
79 | "react": "^16.2.0-0"
80 | },
81 | "dependencies": {
82 | "eslint-plugin-flowtype": "^2.50.0",
83 | "exenv": "^1.2.0",
84 | "prop-types": "^15.6.2"
85 | }
86 | }
87 |
--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
1 | import babel from 'rollup-plugin-babel';
2 | import replace from 'rollup-plugin-replace';
3 | import resolve from 'rollup-plugin-node-resolve';
4 | import { sizeSnapshot } from 'rollup-plugin-size-snapshot';
5 | import { terser } from 'rollup-plugin-terser';
6 |
7 | const input = 'lib/index';
8 | const external = ['exenv', 'prop-types', 'react'];
9 |
10 | const globals = {
11 | 'prop-types': 'PropTypes',
12 | exenv: 'exenv',
13 | react: 'React',
14 | };
15 |
16 | const babelOptions = {
17 | babelrc: false,
18 | exclude: '**/node_modules/**',
19 | presets: [
20 | [
21 | 'env',
22 | {
23 | modules: false,
24 | },
25 | ],
26 | 'react',
27 | 'stage-1',
28 | ],
29 | plugins: ['external-helpers', 'transform-class-properties'],
30 | };
31 |
32 | export default [
33 | {
34 | input,
35 | output: {
36 | file: 'dist/umd/index.js',
37 | format: 'umd',
38 | name: 'ReactKeyHandler',
39 | globals,
40 | },
41 | external,
42 | plugins: [
43 | resolve(),
44 | babel(babelOptions),
45 | replace({ 'process.env.NODE_ENV': JSON.stringify('development') }),
46 | sizeSnapshot(),
47 | ],
48 | },
49 |
50 | {
51 | input,
52 | output: {
53 | file: 'dist/umd/index.min.js',
54 | format: 'umd',
55 | name: 'ReactKeyHandler',
56 | globals,
57 | },
58 | external,
59 | plugins: [
60 | resolve(),
61 | babel(babelOptions),
62 | replace({ 'process.env.NODE_ENV': JSON.stringify('production') }),
63 | sizeSnapshot(),
64 | terser(),
65 | ],
66 | },
67 | {
68 | input,
69 | output: {
70 | file: 'dist/cjs/index.js',
71 | format: 'cjs',
72 | },
73 | external,
74 | plugins: [resolve(), babel(babelOptions), sizeSnapshot()],
75 | },
76 |
77 | {
78 | input,
79 | output: {
80 | file: 'dist/esm/index.js',
81 | format: 'esm',
82 | },
83 | external,
84 | plugins: [resolve(), babel(babelOptions), sizeSnapshot()],
85 | },
86 | ];
87 |
--------------------------------------------------------------------------------
/test/components/helpers/triggerKeyEvent.js:
--------------------------------------------------------------------------------
1 | export default function triggerKeyEvent(
2 | eventName,
3 | keyCode,
4 | keyValue = undefined,
5 | ) {
6 | const event = new window.KeyboardEvent(eventName, { keyCode, key: keyValue });
7 | document.dispatchEvent(event);
8 | }
9 |
--------------------------------------------------------------------------------
/test/components/key-handler.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import sinon from 'sinon';
3 | import { expect } from 'chai';
4 | import { mount, render } from 'enzyme';
5 | import triggerKeyEvent from './helpers/triggerKeyEvent';
6 |
7 | import KeyHandler, { KEYUP, KEYDOWN } from '../../lib';
8 |
9 | const M = 77;
10 | const S = 83;
11 | const ARROW_LEFT = 'ArrowLeft';
12 | const ARROW_RIGHT = 'ArrowRight';
13 |
14 | describe('KeyHandler', () => {
15 | it('renders nothing', () => {
16 | const el = render(