Register and unregister message event listener due to onMessage prop

Author: piranna

src/index.js

@@ -6,9 +6,6 @@ export default class extends Component {
   constructor(props) {
     super(props);
 
-    if (props.onMessage) {
-      window.addEventListener('message', this.onMessage, true);
-    }
 
     if (props.source.method === 'POST') {
       const contentType = props.source.headers['Content-Type'];
@@ -30,6 +27,26 @@ export default class extends Component {
     }
   }
 
+  componentDidMount() {
+    if (this.props.onMessage) {
+      window.addEventListener('message', this.onMessage, true);
+    }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    componentWillUnmount()
+
+    if (nextProps.onMessage) {
+      window.addEventListener('message', this.onMessage, true);
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.props.onMessage) {
+      window.removeEventListener('message', this.onMessage, true);
+    }
+  }
+
   onMessage = nativeEvent => nativeEvent.isTrusted && this.props.onMessage({ nativeEvent });
 
   render() {