Package Exports

react-key-handler

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-key-handler) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-key-handler 🔑

React component to handle key events.

Usage

import React from 'react';
import KeyHandler, {M} from 'react-key-handler';

export default React.createClass({
  getInitialState() {
    return { showMenu: false };
  },

  render() {
    const {showMenu} = this.state;

    return (
      <div>
        <KeyHandler keyCode={M} onKeyHandle={this.toggleMenu} />

        {showMenu &&
          <ol>
            <li>hello</li>
            <li>world</li>
          </ol>
        }
      </div>
    );
  },

  toggleMenu(event) {
    event.preventDefault();

    this.setState({ showMenu: !this.state.showMenu });
  },
});

The props types of the KeyHandler component are:

type Props = {
  keyEventName: string,
  keyCode: number,
  onKeyHandle: Function,
};

keyEventName will default to 'keyup'.

Installation

$ npm install

Development

To start the server:

$ npm start

This starts a webpack-dev-server, which is a little node.js Express server:

$ open http://localhost:8080

Tests

To run all tests:

$ npm test

Or you can run the linters, unit tests and check for type errors individually:

$ npm run test:lint
$ npm run test:unit
$ npm run test:flow

Contributing

Bug reports and pull requests are welcome on GitHub. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.

License

 _________________
< The MIT License >
 -----------------
        \   ^__^
         \  (oo)\_______
            (__)\       )\/\
                ||----w |
                ||     ||