Check if the browser tab is in focus in ReactJS
I found This library. It could be of help.
Here's how I would use it to solve your problem
import React from 'react';
import PageVisibility from 'react-page-visibility';
class YourComponent extends React.Component {
state = {
isWindowInFocus: true,
}
componentDidMount() {
const { isWindowInFocus } = this.props;
if (!isWindowInFocus) {
// do something
}
}
listentoWindow = isVisible => {
this.setState({
isWindowInFocus: isVisible,
});
}
render() {
return (
<PageVisibility onChange={this.listentoWindow}>
<div>
Your component JSX
</div>
</PageVisibility>
);
}
}
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.
There is no reliable method to check it, so you need to combine few methods together. Here is Context for react-hooks
import React, { useState, useEffect } from 'react'
export const WindowContext = React.createContext(null)
export const WindowContextProvider = props => {
const [windowIsActive, setWindowIsActive] = useState(true)
function handleActivity(forcedFlag) {
if (typeof forcedFlag === 'boolean') {
return forcedFlag ? setWindowIsActive(true) : setWindowIsActive(false)
}
return document.hidden ? setWindowIsActive(false) : setWindowIsActive(true)
}
useEffect(() => {
const handleActivityFalse = () => handleActivity(false)
const handleActivityTrue = () => handleActivity(true)
document.addEventListener('visibilitychange', handleActivity)
document.addEventListener('blur', handleActivityFalse)
window.addEventListener('blur', handleActivityFalse)
window.addEventListener('focus', handleActivityTrue )
document.addEventListener('focus', handleActivityTrue)
return () => {
window.removeEventListener('blur', handleActivity)
document.removeEventListener('blur', handleActivityFalse)
window.removeEventListener('focus', handleActivityFalse)
document.removeEventListener('focus', handleActivityTrue )
document.removeEventListener('visibilitychange', handleActivityTrue )
}
}, [])
return <WindowContext.Provider value={{ windowIsActive }}>{props.children}</WindowContext.Provider>
}
Just built this using hooks as of React 16.8
import React, { useEffect } from "react";
// User has switched back to the tab
const onFocus = () => {
console.log("Tab is in focus");
};
// User has switched away from the tab (AKA tab is hidden)
const onBlur = () => {
console.log("Tab is blurred");
};
const WindowFocusHandler = () => {
useEffect(() => {
window.addEventListener("focus", onFocus);
window.addEventListener("blur", onBlur);
// Calls onFocus when the window first loads
onFocus();
// Specify how to clean up after this effect:
return () => {
window.removeEventListener("focus", onFocus);
window.removeEventListener("blur", onBlur);
};
}, []);
return <></>;
};
export default WindowFocusHandler;