jaywcjlove / react-hotkeys

Hi,
I loved the idea. How about to support binding the add/remove the event listeners on the root ref of the childrens?

That way, when a group of inputs below <ReactHotKeys /> can be separated from another group with another <ReactHotKeys />, currently the Component is binding to the same global document

Thanks 🌹

react-hotkeys/src/index.js

Lines 24 to 29 in d48d973

    
           componentWillUnmount() { 
        
             Hotkeys.unbind(this.props.keyName); 
        
             this.isKeyDown = true; 
        
             this.handle = {}; 
        
             document.removeEventListener('keyup', this.handleKeyUpEvent); 
        
           }

Unbind automatically when the component is uninstalled.
@Attrash-Islam

Yes, I saw that. But how that related to the event isolation?

I suggested instead of binding on document to bind the event on the root ref wrapped by the component.

I can supply more examples tomorrow if needed

hotkeys('o, enter', {
  scope: 'wcj',
  element: document.getElementById('warpper'),
}, function(){ 
  console.log('do something else');
});

The new version of hotkeys has been supported. react-hotkeys needs improvement.

	componentWillUnmount() {
	Hotkeys.unbind(this.props.keyName);
	this.isKeyDown = true;
	this.handle = {};
	document.removeEventListener('keyup', this.handleKeyUpEvent);
	}

add/remove Event listener on Children