{"_id":"@banzai-inc/react-key-handler","_rev":"3-a7ea83d41fc4038c40b31d3516fc63df","name":"@banzai-inc/react-key-handler","dist-tags":{"latest":"1.2.0-beta.6"},"versions":{"1.2.0-beta.3":{"name":"@banzai-inc/react-key-handler","version":"1.2.0-beta.3","description":"React component to handle keyboard events","homepage":"https://github.com/ayrton/react-key-handler","author":{"name":"Ayrton De Craene","email":"im@ayrton.be","url":"https://github.com/ayrton"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/banzai-inc/react-key-handler.git"},"bugs":{"url":"https://github.com/banzai-inc/react-key-handler/issues"},"main":"dist/cjs/index.js","module":"dist/esm/index.js","scripts":{"build":"npm run build:clean && npm run build:bundle && npm run build:flow","build:clean":"rimraf dist","build:bundle":"rollup -c","build:flow":"flow-copy-source lib dist/cjs","demo":"parcel ./demo/index.html","demo:build":"parcel build demo/index.html --out-dir demo/dist --public-url=/react-key-handler","demo:deploy":"npm run demo:build && gh-pages -d demo/dist","prepublish":"npm run build","test":"npm run test:lint && npm run test:unit && npm run test:flow","test:flow":"flow check","test:lint":"eslint demo/ lib/ test/","test:unit":"mocha"},"keywords":["react","reactjs","key","event","handler"],"devDependencies":{"babel-core":"^6.26.3","babel-eslint":"^9.0.0","babel-loader":"^8.0.0","babel-plugin-external-helpers":"^6.22.0","babel-plugin-transform-class-properties":"^6.24.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.11.0","babel-preset-stage-1":"^6.13.0","chai":"^4.1.2","chai-enzyme":"^1.0.0-beta.1","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^5.4.0","eslint-config-prettier":"^3.0.1","eslint-plugin-prettier":"^2.6.2","eslint-plugin-react":"^7.11.1","flow-bin":"^0.79.1","flow-copy-source":"^2.0.2","gh-pages":"^1.2.0","jsdom":"^11.12.0","mocha":"^5.2.0","parcel-bundler":"^1.9.7","prettier":"^1.14.2","react":"^16.4.2","react-dom":"^16.4.2","react-syntax-highlighter":"^8.0.1","rimraf":"^2.6.2","rollup":"^0.63.5","rollup-plugin-babel":"^3.0.7","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-replace":"^2.0.0","rollup-plugin-size-snapshot":"^0.6.1","rollup-plugin-terser":"^1.0.1","sinon":"^6.1.4"},"peerDependencies":{"react":"^16.2.0-0 || ^17.0.0"},"dependencies":{"eslint-plugin-flowtype":"^2.50.0","exenv":"^1.2.0","prop-types":"^15.6.2"},"volta":{"node":"10.24.1"},"gitHead":"748516bae8ee2134d6f00c821905aa131a1459a7","_id":"@banzai-inc/react-key-handler@1.2.0-beta.3","_nodeVersion":"10.24.1","_npmVersion":"6.14.12","dist":{"integrity":"sha512-f2HIYxweVKKY7/mEn3Ex/kE+W8UGCbIKa/8TT6QKGtYjXSQjiTefOGiLNzpyS/f7d8a63IpuY7IWGSYiJhBJcA==","shasum":"ae58f4a6c9f845ff79641b362b714ea186f0f1cc","tarball":"https://registry.npmjs.org/@banzai-inc/react-key-handler/-/react-key-handler-1.2.0-beta.3.tgz","fileCount":15,"unpackedSize":59132,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFVW7liiSwPP+6qnlDnYyMj3Ucq8OsSokCway5BYosfOAiEA7VeY5lNWyGu+NfimiMYKE7g0ixouqh0RxK4XGorpTnk="}]},"_npmUser":{"name":"jaredbanzai","email":"jared@banzai.org"},"directories":{},"maintainers":[{"name":"jaredbanzai","email":"jared@banzai.org"},{"name":"buchanankendall","email":"kendall@teachbanzai.com"},{"name":"austinhollenbaugh","email":"austinhollenbaugh@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-key-handler_1.2.0-beta.3_1684442945924_0.6606955131179337"},"_hasShrinkwrap":false},"1.2.0-beta.4":{"name":"@banzai-inc/react-key-handler","version":"1.2.0-beta.4","description":"React component to handle keyboard events","homepage":"https://github.com/ayrton/react-key-handler","author":{"name":"Ayrton De Craene","email":"im@ayrton.be","url":"https://github.com/ayrton"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/banzai-inc/react-key-handler.git"},"bugs":{"url":"https://github.com/banzai-inc/react-key-handler/issues"},"main":"dist/cjs/index.js","module":"dist/esm/index.js","scripts":{"build":"npm run build:clean && npm run build:bundle && npm run build:flow","build:clean":"rimraf dist","build:bundle":"rollup -c","build:flow":"flow-copy-source lib dist/cjs","demo":"parcel ./demo/index.html","demo:build":"parcel build demo/index.html --out-dir demo/dist --public-url=/react-key-handler","demo:deploy":"npm run demo:build && gh-pages -d demo/dist","prepublish":"npm run build","test":"npm run test:lint && npm run test:unit && npm run test:flow","test:flow":"flow check","test:lint":"eslint demo/ lib/ test/","test:unit":"mocha"},"keywords":["react","reactjs","key","event","handler"],"devDependencies":{"babel-core":"^6.26.3","babel-eslint":"^9.0.0","babel-loader":"^8.0.0","babel-plugin-external-helpers":"^6.22.0","babel-plugin-transform-class-properties":"^6.24.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.11.0","babel-preset-stage-1":"^6.13.0","chai":"^4.1.2","chai-enzyme":"^1.0.0-beta.1","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^5.4.0","eslint-config-prettier":"^3.0.1","eslint-plugin-prettier":"^2.6.2","eslint-plugin-react":"^7.11.1","flow-bin":"^0.79.1","flow-copy-source":"^2.0.2","gh-pages":"^1.2.0","jsdom":"^11.12.0","mocha":"^5.2.0","parcel-bundler":"^1.9.7","prettier":"^1.14.2","react":"^16.4.2","react-dom":"^16.4.2","react-syntax-highlighter":"^8.0.1","rimraf":"^2.6.2","rollup":"^0.63.5","rollup-plugin-babel":"^3.0.7","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-replace":"^2.0.0","rollup-plugin-size-snapshot":"^0.6.1","rollup-plugin-terser":"^1.0.1","sinon":"^6.1.4"},"peerDependencies":{"react":"^16.2.0-0 || ^17.0.0"},"dependencies":{"eslint-plugin-flowtype":"^2.50.0","exenv":"^1.2.0","prop-flo":"^15.6.2"},"volta":{"node":"10.24.1"},"gitHead":"748516bae8ee2134d6f00c821905aa131a1459a7","_id":"@banzai-inc/react-key-handler@1.2.0-beta.4","_nodeVersion":"10.24.1","_npmVersion":"6.14.12","dist":{"integrity":"sha512-6vvOxgc3IejutEwA30o82CEE3i4PPKwQQ21ORjcDc3Z+jGsHV7UeOw2G99y0WZoKGGYjQesNSuKXGquTcee10g==","shasum":"36dcd5119428d3290cee51affbcdab7e50584b82","tarball":"https://registry.npmjs.org/@banzai-inc/react-key-handler/-/react-key-handler-1.2.0-beta.4.tgz","fileCount":15,"unpackedSize":59130,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBHcqIi/58W0Wl6x+g67/qOcPhSuHNAm8JPNFSHA8NwFAiA+wQlkd+DS3zy4MuOg4Vthj4KFA+9tol8D/r8ZHBeFig=="}]},"_npmUser":{"name":"jaredbanzai","email":"jared@banzai.org"},"directories":{},"maintainers":[{"name":"jaredbanzai","email":"jared@banzai.org"},{"name":"buchanankendall","email":"kendall@teachbanzai.com"},{"name":"austinhollenbaugh","email":"austinhollenbaugh@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-key-handler_1.2.0-beta.4_1707925045272_0.19509666899925993"},"_hasShrinkwrap":false},"1.2.0-beta.5":{"name":"@banzai-inc/react-key-handler","version":"1.2.0-beta.5","description":"React component to handle keyboard events","homepage":"https://github.com/ayrton/react-key-handler","author":{"name":"Ayrton De Craene","email":"im@ayrton.be","url":"https://github.com/ayrton"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/banzai-inc/react-key-handler.git"},"bugs":{"url":"https://github.com/banzai-inc/react-key-handler/issues"},"main":"dist/cjs/index.js","module":"dist/esm/index.js","scripts":{"build":"npm run build:clean && npm run build:bundle && npm run build:flow","build:clean":"rimraf dist","build:bundle":"rollup -c","build:flow":"flow-copy-source lib dist/cjs","demo":"parcel ./demo/index.html","demo:build":"parcel build demo/index.html --out-dir demo/dist --public-url=/react-key-handler","demo:deploy":"npm run demo:build && gh-pages -d demo/dist","prepublish":"npm run build","test":"npm run test:lint && npm run test:unit && npm run test:flow","test:flow":"flow check","test:lint":"eslint demo/ lib/ test/","test:unit":"mocha"},"keywords":["react","reactjs","key","event","handler"],"devDependencies":{"babel-core":"^6.26.3","babel-eslint":"^9.0.0","babel-loader":"^8.0.0","babel-plugin-external-helpers":"^6.22.0","babel-plugin-transform-class-properties":"^6.24.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.11.0","babel-preset-stage-1":"^6.13.0","chai":"^4.1.2","chai-enzyme":"^1.0.0-beta.1","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^5.4.0","eslint-config-prettier":"^3.0.1","eslint-plugin-prettier":"^2.6.2","eslint-plugin-react":"^7.11.1","flow-bin":"^0.79.1","flow-copy-source":"^2.0.2","gh-pages":"^1.2.0","jsdom":"^11.12.0","mocha":"^5.2.0","parcel-bundler":"^1.9.7","prettier":"^1.14.2","react":"^16.4.2","react-dom":"^16.4.2","react-syntax-highlighter":"^8.0.1","rimraf":"^2.6.2","rollup":"^0.63.5","rollup-plugin-babel":"^3.0.7","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-replace":"^2.0.0","rollup-plugin-size-snapshot":"^0.6.1","rollup-plugin-terser":"^1.0.1","sinon":"^6.1.4"},"peerDependencies":{"react":"^16.2.0-0 || ^17.0.0 || ^18.0.0"},"dependencies":{"eslint-plugin-flowtype":"^2.50.0","exenv":"^1.2.0","prop-flo":"^15.6.2"},"volta":{"node":"10.24.1"},"gitHead":"90d0c85eb3a71df971443098b700d181199b1536","_id":"@banzai-inc/react-key-handler@1.2.0-beta.5","_nodeVersion":"10.24.1","_npmVersion":"6.14.12","dist":{"integrity":"sha512-0v/e8nU4EFExO03+upiRL+T4X8HNLBEw32QOX9duodHCivUmHBhub/pmYrIIlOEwSBJHF411qlpHkcYVjbV10w==","shasum":"b026ddb9108a4ac794a748a7b433b038523646d1","tarball":"https://registry.npmjs.org/@banzai-inc/react-key-handler/-/react-key-handler-1.2.0-beta.5.tgz","fileCount":15,"unpackedSize":59141,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID1wglv8gm7IFM9M4FPUEV2D/NQH2MK7MwOc0RxMzFD4AiEAtGJk+TIYmh2ck8WgmoMwDxUxfGqEwf0TJF1iXlYYkyg="}]},"_npmUser":{"name":"jaredbanzai","email":"jared@banzai.org"},"directories":{},"maintainers":[{"name":"jaredbanzai","email":"jared@banzai.org"},{"name":"buchanankendall","email":"kendall@teachbanzai.com"},{"name":"austinhollenbaugh","email":"austinhollenbaugh@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-key-handler_1.2.0-beta.5_1707929272788_0.4116186286972985"},"_hasShrinkwrap":false},"1.2.0-beta.6":{"name":"@banzai-inc/react-key-handler","version":"1.2.0-beta.6","description":"React component to handle keyboard events","homepage":"https://github.com/ayrton/react-key-handler","author":{"name":"Ayrton De Craene","email":"im@ayrton.be","url":"https://github.com/ayrton"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/banzai-inc/react-key-handler.git"},"bugs":{"url":"https://github.com/banzai-inc/react-key-handler/issues"},"main":"dist/cjs/index.js","module":"dist/esm/index.js","scripts":{"build":"npm run build:clean && npm run build:bundle && npm run build:flow","build:clean":"rimraf dist","build:bundle":"rollup -c","build:flow":"flow-copy-source lib dist/cjs","demo":"parcel ./demo/index.html","demo:build":"parcel build demo/index.html --out-dir demo/dist --public-url=/react-key-handler","demo:deploy":"npm run demo:build && gh-pages -d demo/dist","prepublish":"npm run build","test":"npm run test:lint && npm run test:unit && npm run test:flow","test:flow":"flow check","test:lint":"eslint demo/ lib/ test/","test:unit":"mocha"},"keywords":["react","reactjs","key","event","handler"],"devDependencies":{"babel-core":"^6.26.3","babel-eslint":"^9.0.0","babel-loader":"^8.0.0","babel-plugin-external-helpers":"^6.22.0","babel-plugin-transform-class-properties":"^6.24.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.11.0","babel-preset-stage-1":"^6.13.0","chai":"^4.1.2","chai-enzyme":"^1.0.0-beta.1","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^5.4.0","eslint-config-prettier":"^3.0.1","eslint-plugin-prettier":"^2.6.2","eslint-plugin-react":"^7.11.1","flow-bin":"^0.79.1","flow-copy-source":"^2.0.2","gh-pages":"^1.2.0","jsdom":"^11.12.0","mocha":"^5.2.0","parcel-bundler":"^1.9.7","prettier":"^1.14.2","react":"^16.4.2","react-dom":"^16.4.2","react-syntax-highlighter":"^8.0.1","rimraf":"^2.6.2","rollup":"^0.63.5","rollup-plugin-babel":"^3.0.7","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-replace":"^2.0.0","rollup-plugin-size-snapshot":"^0.6.1","rollup-plugin-terser":"^1.0.1","sinon":"^6.1.4"},"peerDependencies":{"react":"^16.2.0-0 || ^17.0.0 || ^18.0.0"},"dependencies":{"eslint-plugin-flowtype":"^2.50.0","exenv":"^1.2.0","prop-types":"^15.6.2"},"volta":{"node":"10.24.1"},"gitHead":"6e86eb8317f0454cff9c08db71d51450f498707c","_id":"@banzai-inc/react-key-handler@1.2.0-beta.6","_nodeVersion":"10.24.1","_npmVersion":"6.14.12","dist":{"integrity":"sha512-5L1ShiglZFkasB7GZjyjEhRDtRl5iRU3JCFX//BB+nCXsGytzVxfgJNHYoBYt5ON43+mygsUbcBy8yKOXCZB0Q==","shasum":"ad9d94a805f5867d334da2b752150c2bf25b5829","tarball":"https://registry.npmjs.org/@banzai-inc/react-key-handler/-/react-key-handler-1.2.0-beta.6.tgz","fileCount":15,"unpackedSize":59143,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGvWrW2+D+7pcyCBCAjFH+gYzsV/tdlsZSP9P9BLWy2YAiEA7g4IJOfRFH3L9RNuobeDKFgzPpIQ81Yu0IVzEte6TO0="}]},"_npmUser":{"name":"jaredbanzai","email":"jared@banzai.org"},"directories":{},"maintainers":[{"name":"jaredbanzai","email":"jared@banzai.org"},{"name":"buchanankendall","email":"kendall@teachbanzai.com"},{"name":"austinhollenbaugh","email":"austinhollenbaugh@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-key-handler_1.2.0-beta.6_1707932184757_0.8348424990557402"},"_hasShrinkwrap":false}},"time":{"created":"2023-05-18T20:49:05.877Z","1.2.0-beta.3":"2023-05-18T20:49:06.149Z","modified":"2024-02-14T17:36:25.371Z","1.2.0-beta.4":"2024-02-14T15:37:25.402Z","1.2.0-beta.5":"2024-02-14T16:47:52.983Z","1.2.0-beta.6":"2024-02-14T17:36:25.006Z"},"maintainers":[{"name":"jaredbanzai","email":"jared@banzai.org"},{"name":"buchanankendall","email":"kendall@teachbanzai.com"},{"name":"austinhollenbaugh","email":"austinhollenbaugh@gmail.com"}],"description":"React component to handle keyboard events","homepage":"https://github.com/ayrton/react-key-handler","keywords":["react","reactjs","key","event","handler"],"repository":{"type":"git","url":"git+https://github.com/banzai-inc/react-key-handler.git"},"author":{"name":"Ayrton De Craene","email":"im@ayrton.be","url":"https://github.com/ayrton"},"bugs":{"url":"https://github.com/banzai-inc/react-key-handler/issues"},"license":"MIT","readme":"# react-key-handler 🔑\n\n[![npm version](https://img.shields.io/npm/v/react-key-handler.svg)](https://www.npmjs.com/package/react-key-handler) [![License](https://img.shields.io/npm/l/react-key-handler.svg)](https://www.npmjs.com/package/react-key-handler) [![Build Status](https://travis-ci.org/ayrton/react-key-handler.svg?branch=master)](https://travis-ci.org/ayrton/react-key-handler)\n\nReact component to handle keyboard events (such as `keyup`, `keydown` & `keypress`).\n\n## Changes for banzai:\nUpdated the peer dependency to support react 17 as we have been running this on react 17 for a while now.\nThis package will eventually need to be replaced with something different as part of our upgrades.\n\n## Table of Contents\n\n- [react-key-handler 🔑](#react-key-handler-)\n - [Changes for banzai:](#changes-for-banzai)\n - [Table of Contents](#table-of-contents)\n - [Installation](#installation)\n - [Usage](#usage)\n - [Higher-order Components](#higher-order-components)\n - [Component](#component)\n - [Form key handling](#form-key-handling)\n - [Key event names](#key-event-names)\n - [`keyValue`, `code` and `keyCode`](#keyvalue-code-and-keycode)\n - [Development](#development)\n - [Setup](#setup)\n - [Getting started](#getting-started)\n - [Tests](#tests)\n - [Contributing](#contributing)\n - [License](#license)\n\n## Installation\n\n```sh\n$ npm install react-key-handler --save\n```\n\n## Usage\n\nYou can use `react-key-handler` library in two flavours:\n\n- [higher-order components](#higher-order-components)\n- [component](#component)\n\n### Higher-order Components\n\nThis library includes two similar higher-order components, but with a different puprose:\n\n| Higher-order Component | Purpose |\n| ---------------------- | ------------------- |\n| `keyHandler` | Handles key changes |\n| `keyToggleHandler` | Handles key toggles |\n\nBoth have the same API and will decorate the given component with a `keyValue`, `code`\nand `keyCode` property.\n\nInternally the `KeyHandler` component is used, for a full understanding be sure to\ncheck out [the implementation](lib/key-handler.js).\n\n```jsx\nimport React from 'react';\nimport { keyHandler, KEYPRESS } from 'react-key-handler';\n\nfunction Demo({ keyValue }) {\n return (\n
\n {keyValue === 's' && (\n
    \n
  1. hello
    2. \n
  2. world
    3. \n
\n )}\n
\n );\n}\n\nexport default keyHandler({ keyEventName: KEYPRESS, keyValue: 's' })(Demo);\n```\n\nThe prop types of the `KeyHandler` component are:\n\n| Name | Type | Required | Default | |\n| --------------- | ------ | ---------- | --------- | -------------------------------------- |\n| keyEventName | string | no | `'keyup'` | `'keydown'`, `'keypress'` or `'keyup'` |\n| keyValue | string | yes **\\*** | | Any given [KeyboardEvent.key] |\n| code | string | yes **\\*** | | Any given [KeyboardEvent.code] |\n| keyCode† | number | yes **\\*** | | Any given [KeyboardEvent.keyCode] |\n\n**\\*** You should pass at least one of these props.\n\n† _Note_ that the keyCode is frequently browser specific and has therefore be set as\ndeprecated, see [MDN for details](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode).\n\n[Examples](demo/components/examples/decorators/)\n\n### Component\n\n```jsx\nimport React from 'react';\nimport KeyHandler, { KEYPRESS } from 'react-key-handler';\n\nexport default class Demo extends React.Component {\n state = { showMenu: false };\n\n render() {\n const { showMenu } = this.state;\n\n return (\n \n \n\n {showMenu && (\n
    \n
  1. hello
    2. \n
  2. world
    3. \n
\n )}\n \n );\n },\n\n toggleMenu = (event) => {\n event.preventDefault();\n\n this.setState({ showMenu: !this.state.showMenu });\n };\n}\n```\n\nThe prop types of the `KeyHandler` component are:\n\n| Name | Type | Required | Default | |\n| --------------- | -------- | ---------- | --------- | ------------------------------------------------ |\n| keyEventName | string | no | `'keyup'` | `'keydown'`, `'keypress'` or `'keyup'` |\n| keyValue | string | yes **\\*** | | Any given [KeyboardEvent.key] |\n| code | string | yes **\\*** | | Any given [KeyboardEvent.code] |\n| keyCode† | number | yes **\\*** | | Any given [KeyboardEvent.keyCode] |\n| onKeyHandle | function | yes | | Function that is called when they key is handled |\n\n**\\*** You should pass at least one of these props.\n\n† _Note_ that the keyCode is frequently browser specific and has therefore be set as\ndeprecated, see [MDN for details](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode).\n\n[Example](demo/components/examples/component/index.js)\n\n### Form key handling\n\nThis library does not handle key events for form elements such as `` and `