I need to show different app link depends on user operation system. Such as IOS, Android or both if user is opening page on Desktop. I'm using React and Next.js I tried to use navigator.userAgent with no luck.

It will be perfect to achieve code like below:

import React from "react";
import { AppDownload as AppDownloadProps } from "xxx";

export default function DownloadApp({
  appDownload,
}: AppDownloadProps): JSX.Element {
  return (
        <div>
          {isIos && <a href={appDownload?.ios.url}></a>}
          {isAndroid && <a href={appDownload?.android.url}></a>}
          {isDesktop && <a href={appDownload?.desktop.url}></a>}
        </div>
  );
}

I need to show different app link depends on user operation system. Such as IOS, Android or both if user is opening page on Desktop. I'm using React and Next.js I tried to use navigator.userAgent with no luck.

It will be perfect to achieve code like below:

import React from "react";
import { AppDownload as AppDownloadProps } from "xxx";

export default function DownloadApp({
  appDownload,
}: AppDownloadProps): JSX.Element {
  return (
        <div>
          {isIos && <a href={appDownload?.ios.url}></a>}
          {isAndroid && <a href={appDownload?.android.url}></a>}
          {isDesktop && <a href={appDownload?.desktop.url}></a>}
        </div>
  );
}

• javascript
• reactjs
• next.js

• 1 Does this answer your question? Detect MacOS, iOS, Windows, Android and Linux OS with JS – Andy Commented Oct 10, 2022 at 10:17

2 Answers 2

You can use navigator.userAgent to detect the useragent in browser and there are lots of other options are available to get agent information.

console.log("agent is:", window?.navigator?.userAgent)

console.log("platform is: ", window?.navigator?.platform)

console.log("user agent data: ", window?.navigator?.userAgentData)

Possible duplicate of Detect MacOS, iOS, Windows, Android and Linux OS with JS.

You can use window.navigator but will need to parse the result.