Get Browser Locale

A helpful utility function to get browser locale.

get-locale.ts

export function getBrowserLocale(): string {
  if (typeof window === "undefined") {
    return "en-US";
  }

  const nav = window.navigator;
  let locale: string = "en-US";

  if (nav.languages?.length) {
    // Chrome, Firefox
    locale = nav.languages[0];
  } else if (nav.language) {
    // IE, Safari
    locale = nav.language;
  }

  return locale;
}

Usage

One good use case is displaying number in locale format.

<span>
  {Intl.NumberFormat(getBrowserLocale(), {
    notation: "compact",
    maximumFractionDigits: 1,
  })
  .format(100000)
  .toString()}
</span>

This displays 100k for locale en-US and 1L for locale en-IN