How to trigger an event in React after an opened window closes

Question

I have a div in React with an onClick handler that when clicked implements window.open in a pop-up window that directs them to an external URL. When the user closes the pop-up window, I would like to implement an API call. However, everything I've tried has failed, including attempting to use event listeners.

How can I detect when a window is closed in React?

The current code I have for the window event is as follows:

export class App extends Component {

  opener = () => {
    const myWindow = window.open("https://www.espn.com", "MsgWindow", "width=200,height=100");
  }

  render() {  

    return (
      <div onClick={this.opener}>
        Hello World
      </div>
    );
  }
}

score 8 · Accepted Answer · answered Dec 05 '18 at 05:28

You could change the opener function as below:

  opener = () => {
    const myWindow = window.open("https://www.espn.com", "MsgWindow", "width=200,height=100");

    var timer = setInterval(function() { 
        if(myWindow.closed) {
            clearInterval(timer);
            alert('closed');
        }
    }, 1000);
  }

Reference | Codepen

How to trigger an event in React after an opened window closes

1 Answers1