react-global-event-method

global events using method decorators

Usage no npm install needed!

<script type="module">
  import reactGlobalEventMethod from 'https://cdn.skypack.dev/react-global-event-method';
</script>

README

Allows declarative event listeners for global events on react components. Inspired by this comment

Install

npm install --save react-global-event-method

Usage

The arguments are onGlobalEvent(eventName, eventTarget=window, useCapture=false). Cleanup is done for you, and you may register multiple handlers and multiple events per handler.

import onGlobalEvent from 'react-global-event-method';

class MyComponent extends React.Component {
  @onGlobalEvent('click')
  handleGlobalClick(event){
    this.setState(...);
  }

  render(){
    // ...
  }
}

NOTE!

If you declare componentDidMount or componentWillUnmount they must be above any @onGlobalEvent listeners.