{"action":"closed","issue":{"url":"https://api.github.com/repos/greena13/react-hotkeys/issues/63","repository_url":"https://api.github.com/repos/greena13/react-hotkeys","labels_url":"https://api.github.com/repos/greena13/react-hotkeys/issues/63/labels{/name}","comments_url":"https://api.github.com/repos/greena13/react-hotkeys/issues/63/comments","events_url":"https://api.github.com/repos/greena13/react-hotkeys/issues/63/events","html_url":"https://github.com/greena13/react-hotkeys/issues/63","id":241370988,"number":63,"title":"Implement HOC for react-hotkeys? ","user":{"login":"vivian-eb","id":29084992,"avatar_url":"https://avatars3.githubusercontent.com/u/29084992?v=4","gravatar_id":"","url":"https://api.github.com/users/vivian-eb","html_url":"https://github.com/vivian-eb","followers_url":"https://api.github.com/users/vivian-eb/followers","following_url":"https://api.github.com/users/vivian-eb/following{/other_user}","gists_url":"https://api.github.com/users/vivian-eb/gists{/gist_id}","starred_url":"https://api.github.com/users/vivian-eb/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/vivian-eb/subscriptions","organizations_url":"https://api.github.com/users/vivian-eb/orgs","repos_url":"https://api.github.com/users/vivian-eb/repos","events_url":"https://api.github.com/users/vivian-eb/events{/privacy}","received_events_url":"https://api.github.com/users/vivian-eb/received_events","type":"User","site_admin":false},"labels":[{"id":195457693,"url":"https://api.github.com/repos/greena13/react-hotkeys/labels/enhancement","name":"enhancement","color":"84b6eb","default":true}],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":{"url":"https://api.github.com/repos/greena13/react-hotkeys/milestones/1","html_url":"https://github.com/greena13/react-hotkeys/milestone/1","labels_url":"https://api.github.com/repos/greena13/react-hotkeys/milestones/1/labels","id":2922253,"number":1,"title":"v1.0.0","description":null,"creator":{"login":"greena13","id":2115363,"avatar_url":"https://avatars3.githubusercontent.com/u/2115363?v=4","gravatar_id":"","url":"https://api.github.com/users/greena13","html_url":"https://github.com/greena13","followers_url":"https://api.github.com/users/greena13/followers","following_url":"https://api.github.com/users/greena13/following{/other_user}","gists_url":"https://api.github.com/users/greena13/gists{/gist_id}","starred_url":"https://api.github.com/users/greena13/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/greena13/subscriptions","organizations_url":"https://api.github.com/users/greena13/orgs","repos_url":"https://api.github.com/users/greena13/repos","events_url":"https://api.github.com/users/greena13/events{/privacy}","received_events_url":"https://api.github.com/users/greena13/received_events","type":"User","site_admin":false},"open_issues":4,"closed_issues":1,"state":"open","created_at":"2017-11-19T09:02:26Z","updated_at":"2018-04-02T09:27:51Z","due_on":null,"closed_at":null},"comments":1,"created_at":"2017-07-07T20:24:19Z","updated_at":"2018-04-02T09:27:51Z","closed_at":"2018-04-02T09:27:51Z","author_association":"NONE","body":"This library has been tremendously helpful in implementing key-related events. And a HotKeys HOC would make the application of the functionalities more standardized and decoupled as opposed to manually wrapped each component (that needs keyboard actions) with the HotKeys tag in the component file. \r\n\r\nI'd like to propose the following API: \r\n\r\n```\r\nconst withKeyboardNavigation = (Component, keyMap) => (\r\n    class WithKeyboardNavigationWrapper extends PureComponent {\r\n\t\t\t...\r\n\t\t\t\r\n            _getBoundHandlers() {\r\n\t            // returns bounded handlers\r\n\t        }\r\n\t\t\t...\r\n\r\n            render () {\r\n                // returns HOC-wrapped Component with keyMap & handlers props on the <HotKeys> tag, and a11y props on the <wrappedComponent> tag. \r\n\t            \r\n```\r\n\r\nThe keyboard action and the keyboard event are states on the HOC, and are passed in as props to the wrappedComponent. The component can then implement the appropriate methods according to the given props. \r\n\r\nThoughts? "}}
{"actor":{"display_login":"greena13"}}