Skip to main content

Framework integrations

get-browser is framework-agnostic — it's just functions. But sometimes you want a typed hook / composable that re-renders on the values you care about. These are copy-paste recipes you can drop into your project.

React hook​

src/hooks/use-browser.ts
import { useSyncExternalStore } from 'react';
import { type Browser, detect } from 'get-browser';

const subscribe = () => () => {};
const getServerSnapshot = (): Browser => 'unknown';

export function useBrowser(): Browser {
  return useSyncExternalStore(subscribe, () => detect(), getServerSnapshot);
}

Usage:

import { useBrowser } from './hooks/use-browser';
import { browsers } from 'get-browser';

function DownloadBadge() {
  const browser = useBrowser();
  return browser === browsers.SAFARI ? <SafariBadge /> : <ChromeBadge />;
}

Why useSyncExternalStore? It's the React-recommended way to read a non-React data source so SSR and CSR snapshots stay consistent. The empty subscribe is intentional — the user-agent doesn't change during a session, so we never re-fire.

For a hook that updates when you pass a custom UA at runtime (e.g. in tests), wrap detect in useMemo:

import { useMemo } from 'react';
import { detect } from 'get-browser';

export function useBrowserWithOverride(userAgent?: string) {
  return useMemo(() => detect(userAgent ? { userAgent } : undefined), [userAgent]);
}

Vue 3 composable​

src/composables/useBrowser.ts
import { ref } from 'vue';
import { type Browser, detect } from 'get-browser';

export function useBrowser() {
  const browser = ref<Browser>(detect());
  return { browser };
}

Usage:

<script setup lang="ts">
import { useBrowser } from '@/composables/useBrowser';
import { browsers } from 'get-browser';

const { browser } = useBrowser();
</script>

<template>
  <p v-if="browser === browsers.IE">Please upgrade your browser.</p>
</template>

Svelte 5 store​

src/lib/browser.svelte.ts
import { detect, type Browser } from 'get-browser';

export function createBrowser() {
  let value = $state<Browser>('unknown');

  if (typeof window !== 'undefined') {
    value = detect();
  }

  return {
    get value() {
      return value;
    },
  };
}

Usage:

<script lang="ts">
  import { createBrowser } from '$lib/browser.svelte.ts';
  import { browsers } from 'get-browser';

  const browser = createBrowser();
</script>

{#if browser.value === browsers.SAFARI}
  <p>You're on Safari.</p>
{/if}

Solid signal​

src/lib/browser.ts
import { createSignal } from 'solid-js';
import { detect, type Browser } from 'get-browser';

export const [browser, setBrowser] = createSignal<Browser>(detect());

Usage:

import { browser } from './lib/browser';
import { browsers } from 'get-browser';

function App() {
  return (
    <Show when={browser() === browsers.SAFARI}>
      <SafariOnly />
    </Show>
  );
}

Angular service​

src/app/browser.service.ts
import { Injectable } from '@angular/core';
import { detect, type Browser } from 'get-browser';

@Injectable({ providedIn: 'root' })
export class BrowserService {
  readonly browser: Browser = detect();
}

See also​