{"action":"created","issue":{"url":"https://api.github.com/repos/glenjamin/react-hotkey/issues/5","repository_url":"https://api.github.com/repos/glenjamin/react-hotkey","labels_url":"https://api.github.com/repos/glenjamin/react-hotkey/issues/5/labels{/name}","comments_url":"https://api.github.com/repos/glenjamin/react-hotkey/issues/5/comments","events_url":"https://api.github.com/repos/glenjamin/react-hotkey/issues/5/events","html_url":"https://github.com/glenjamin/react-hotkey/issues/5","id":103924524,"number":5,"title":"Move to es6 and decorators approach.","user":{"login":"lapanoid","id":154949,"avatar_url":"https://avatars.githubusercontent.com/u/154949?v=3","gravatar_id":"","url":"https://api.github.com/users/lapanoid","html_url":"https://github.com/lapanoid","followers_url":"https://api.github.com/users/lapanoid/followers","following_url":"https://api.github.com/users/lapanoid/following{/other_user}","gists_url":"https://api.github.com/users/lapanoid/gists{/gist_id}","starred_url":"https://api.github.com/users/lapanoid/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/lapanoid/subscriptions","organizations_url":"https://api.github.com/users/lapanoid/orgs","repos_url":"https://api.github.com/users/lapanoid/repos","events_url":"https://api.github.com/users/lapanoid/events{/privacy}","received_events_url":"https://api.github.com/users/lapanoid/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":9,"created_at":"2015-08-30T13:47:54Z","updated_at":"2016-09-12T17:13:54Z","closed_at":null,"body":"Thanks for your project!\r\nReact 13+ encourage es6 and discourage mixin usage, did you think about moving to decorators instead of mixins?"},"comment":{"url":"https://api.github.com/repos/glenjamin/react-hotkey/issues/comments/246419779","html_url":"https://github.com/glenjamin/react-hotkey/issues/5#issuecomment-246419779","issue_url":"https://api.github.com/repos/glenjamin/react-hotkey/issues/5","id":246419779,"user":{"login":"glenjamin","id":151272,"avatar_url":"https://avatars.githubusercontent.com/u/151272?v=3","gravatar_id":"","url":"https://api.github.com/users/glenjamin","html_url":"https://github.com/glenjamin","followers_url":"https://api.github.com/users/glenjamin/followers","following_url":"https://api.github.com/users/glenjamin/following{/other_user}","gists_url":"https://api.github.com/users/glenjamin/gists{/gist_id}","starred_url":"https://api.github.com/users/glenjamin/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/glenjamin/subscriptions","organizations_url":"https://api.github.com/users/glenjamin/orgs","repos_url":"https://api.github.com/users/glenjamin/repos","events_url":"https://api.github.com/users/glenjamin/events{/privacy}","received_events_url":"https://api.github.com/users/glenjamin/received_events","type":"User","site_admin":false},"created_at":"2016-09-12T17:13:54Z","updated_at":"2016-09-12T17:13:54Z","body":"Hrm, I just tried it now and a HOC is actually quite tricky - because there's no obvious way to get a reference to the event handler. A composable child component seems to be a better option.\r\n\r\nSomething like this (untested, just wrote it now in this comment box)\r\n\r\n```jsx\r\nclass Hotkey extends React.Component {\r\n    propTypes: {\r\n        onKey: React.PropTypes.func.isRequired\r\n    }\r\n    componentDidMount() {\r\n        hotkey.addHandler(this.props.onKey);\r\n    }\r\n    shouldComponentUpdate(nextProps) {\r\n        return nextProps.onKey !== this.props.onKey;\r\n    }\r\n    componentDidUpdate(prevProps) {\r\n        hotkey.removeHandler(prevProps.onKey);\r\n        hotkey.addHandler(this.props.onKey);\r\n    }\r\n    componentWillUnmount() {\r\n        hotkey.removeHandler(this.props.onKey);\r\n    }\r\n    render() {\r\n        return null;\r\n    }\r\n}\r\n\r\n// Use inside your own components:\r\n<div>\r\n  <Hotkey onKey={(e) => this.handleKey(e)} />\r\n</div>\r\n```"}}
{"actor":{"display_login":"glenjamin"}}