1 min read

How to Detect macOS in JavaScript or React Applications

Learn how to reliably detect if a user is on macOS using JavaScript.

Share via

Posted by

Posted on

A compact example on how to detect if the OS is MacOS or others, which help for cases like to create shortcuts for web applications.


const isMac = window.navigator.userAgentData
            ? window.navigator.userAgentData.platform === 'macOS'
            : /Mac/i.test(window.navigator.userAgent);

In React, since window is not available during server-side rendering or the initial render, it's important to access it inside a useEffect to ensure it's defined.

jsx


const [isMac, setIsMac] = useState(false);
    
useEffect(() => {
        const isMac = window.navigator.userAgentData
            ? window.navigator.userAgentData.platform === 'macOS'
            : /Mac/i.test(window.navigator.userAgent);

        setIsMac(isMac);
}, []);

in React, Nextjs

Hope this helps

How to Detect macOS in JavaScript or React Applications

Comments (0)

Comments (0)