Skip to main content

Playground

The detection card below uses the real get-browser bundle. Pick a sample UA from the dropdown, paste your own, or leave both empty to detect against your actual navigator.userAgent.

Loading detection…

How this page uses get-browser

The card is a small React component. It calls detect() and each predicate once per render, passing the selected user-agent (or nothing — in which case the library reads from the browser's navigator). It uses <BrowserOnly> because Docusaurus pre-renders pages and there's no navigator at build time.

import {
  detect, getOS, isMobile, isInAppBrowser,
  browsers, oses,
} from 'get-browser';

const browser = detect();
const os      = getOS();

switch (browser) {
  case browsers.CHROME:  loadChromeExtensionShim(); break;
  case browsers.SAFARI:  patchSafariScrollBug();    break;
  case browsers.FIREFOX: enableFirefoxOnlyFeature(); break;
  default:               /* nothing */              break;
}

const shortcut = os === oses.MACOS ? '⌘ K' : 'Ctrl K';

if (isMobile())        document.body.classList.add('is-mobile');
if (isInAppBrowser())  showOpenInBrowserHint(); // OAuth won't work here

See the detect() API page for the full signature, or jump to recipes for more patterns.