JSPM – react-keyboard@0.4.0

Package Exports

react-keyboard

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-keyboard) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React HotKeys

This is an opinionated refactor of react-hotkeys, please use it at your own risk

run the example:

node server.js

Quick Example

import {HotKeys} from 'react-keyboard';

// Simple "name:key sequence/s" to create a hotkey map
const keyMap = {
  cmdK: ['command+k'],
  deleteNode: ['del', 'backspace'],
}

// render the component
render(
  <HotKeys keyMap={keyMap}>
    <Node style={{ border: '1px solid #ccc' }}>
      Node1
      <Leaf style={{ border: '1px solid #ff0000' }}>Press `del` on me, event will be handled by `Node1` and the current node</Leaf>
    </Node>
    <Node style={{ border: '1px solid #ccc' }}>
      Node2
      <Node style={{ border: '1px solid #00ff00' }}>Press `del` on me, event will be only handled by current node</Node>
    </Node>
  </HotKeys>,
  document.getElementById('root')
)

const Node = ({ children, ...props }) => {
  const deleteNode = (e, seq) => {
    console.log(`delete node with: ${seq}`)
    return false
  }
  const cmdK = (e, seq) => {
    console.log(`snap left with: ${seq}`)
  }
  const handlers = {
    cmdK,
    deleteNode,
  }
  return (
    <HotKeys handlers={handlers} {...props}>
      { children }
    </HotKeys>
  )
}

const Leaf = ({ children, ...props }) => {
  // delete handler bubbles to it's parent
  const deleteNode = (e, seq) => {
    console.log(`delete node with: ${seq}`)
  }
  const handlers = {
    deleteNode,
  }
  return (
    <HotKeys handlers={handlers} {...props}>
      { children }
    </HotKeys>
  )
}

what has been changed compare to react-hotkeys

The main changes here are to allow event to bubble:

react-hotkeys don't allow parent to handle the event if child has the a same handler. This behaviour works perfectly unless you need to do optional event handle. For example, onCancel event should be handled in a certain condition in a child component other wise parent will handle it. However, react-hotkeys won't work in this case.

react-keyboard uses mousetrap. It respects the way how mousetrap handle event bubble:

if event handler returns true, event bubbles to parent, if event handler returns false, it will not bubble

By default, the bubbling behaviour of react-keyboard is exactly the same as mousetrap: event bubbles up by default. But if the event handler returns false, then event will stop bubbling.

When handler returns false, internally mousetrap will do:

e.stopPropagation()
e.preventDefault()

If you don't want to preventDefault, simply do not return false and add e.stopPropagation() in your handler.

Install

npm install react-keyboard

Why not fork?

Write in ES6 extends Component manner and the principle changed.

License

MIT