diff --git a/README.md b/README.md index 25f2520..f96faa4 100644 --- a/README.md +++ b/README.md @@ -106,39 +106,28 @@ file. import keymap from './keymap' ``` -#### 3. Rise of the ShortcutsManager +#### 3. Wrap your application in \ Define your keymap in whichever supported format but in the end it must be an -object. `ShortcutsManager` can’t parse JSON and will certainly not be happy +object. `ShortcutsProvider` can’t parse JSON and will certainly not be happy about the situation. +Wrap your application (or the part that you want to use keyboard shortcuts with) in a `` tag. This will provide the necessary attributes in `context` for `` (below) to function. + ```javascript import keymap from './keymap' -import { ShortcutManager } from 'react-shortcuts' - -const shortcutManager = new ShortcutManager(keymap) +import { ShortcutsProvider } from 'react-shortcuts' -// Or like this +// ... -const shortcutManager = new ShortcutManager() -shortcutManager.setKeymap(keymap) -``` + + -#### 4. Include `shortcutManager` into getChildContext of some parent component. So that `` can receive it. - -```javascript -class App extends React.Component { - getChildContext() { - return { shortcuts: shortcutManager } - } -} - -App.childContextTypes = { - shortcuts: PropTypes.object.isRequired -} + + ``` -#### 5. Require the component +#### 4. Require the component You need to require the component in the file you want to use shortcuts in. For example ``. @@ -202,7 +191,7 @@ class TodoItem extends React.Component { - `isolate`: bool - Use this when a child component has React's key handler (onKeyUp, onKeyPress, onKeyDown). Otherwise, React Shortcuts stops propagation of that event due to nature of event delegation that React uses internally. - `alwaysFireHandler`: bool - - Use this when you want events keep firing on the focused input elements. + - Use this when you want events keep firing on the focused input elements. ## Thanks, Atom diff --git a/src/component/ShortcutsProvider.js b/src/component/ShortcutsProvider.js new file mode 100644 index 0000000..358213e --- /dev/null +++ b/src/component/ShortcutsProvider.js @@ -0,0 +1,35 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; + +import shortcutManager from '../shortcut-manager'; + +class ShortcutsProvider extends Component { + + getChildContext() { + const { keymap } = this.props; + + return { + shortcuts: new shortcutManager(keymap), + }; + } + + render() { + return this.props.children; + } + +} + +ShortcutsProvider.propTypes = { + children: PropTypes.node, + keymap: PropTypes.object.isRequired, +}; + +ShortcutsProvider.defaultProps = { + children: null, +}; + +ShortcutsProvider.childContextTypes = { + shortcuts: PropTypes.object.isRequired, +}; + +export default ShortcutsProvider; diff --git a/src/index.js b/src/index.js index dfeb718..7900118 100644 --- a/src/index.js +++ b/src/index.js @@ -1,4 +1,5 @@ module.exports = { ShortcutManager: require('./shortcut-manager'), Shortcuts: require('./component/'), + ShortcutsProvider: require('./component/ShortcutsProvider'), }