ahooks/es/useDocumentVisibility/index.js

react hooks library

import { useState } from 'react';
import useEventListener from '../useEventListener';
import isBrowser from '../utils/isBrowser';
const getVisibility = () => {
    if (!isBrowser) {
        return 'visible';
    }
    return document.visibilityState;
};
function useDocumentVisibility() {
    const [documentVisibility, setDocumentVisibility] = useState(getVisibility);
    useEventListener('visibilitychange', () => {
        setDocumentVisibility(getVisibility());
    }, {
        target: () => document,
    });
    return documentVisibility;
}
export default useDocumentVisibility;