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("", "MsgWindow", "width=200,height=100");
  }

  render() {  

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

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.", "MsgWindow", "width=200,height=100");
  }

  render() {  

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

• javascript
• reactjs
• window

Share Improve this question Follow asked Dec 5, 2018 at 4:56 DogDog 2,91677 gold badges3434 silver badges7272 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

You could change the opener function as below:

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

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

Reference | Codepen