Check if the browser tab is in focus in ReactJS

Question

I have a website in ReactJS. I want to get a callback whenever my tab comes in focus or is hidden. I came across the Page Visibility API for this but I\'m not able to figure out

Answer 1

This should work:

componentDidMount() {
    window.addEventListener("focus", this.onFocus)
}

componentWillUnmount() {
    window.removeEventListener("focus", this.onFocus)
}

onFocus = () => {
    //
}

Edit: same goes for "blur" and it should work for when the tab becomes hidden.

Check @Assaf's answer for usage with hooks.