getBrowserLanguage
Returns the browser's preferred language (e.g., "en", "en-US", "ru").
1/**
2 * Returns the browser's preferred language (e.g., "en", "en-US", "ru").
3 *
4 * @param fallback - A fallback value if language is unavailable.
5 * @returns The language string or the fallback.
6 */
7export function getBrowserLanguage(fallback = 'en'): string {
8 if (typeof navigator === 'undefined') return fallback;
9
10 return navigator.language || fallback;
11}
Fallback Support
Ensures a default language is always returned even if the browser's language is unavailable.
Environment-Aware
Includes a guard clause to prevent execution in non-browser environments like Node.js.
Simple and Reliable
Uses the standardized
navigator.language
property, which is widely supported across modern browsers.Customizable Behavior
Allows developers to define a custom fallback language, enhancing adaptability in internationalized applications.
Tests | Examples
1test('getBrowserLanguage - returns navigator.language if available', () => {
2 const original = navigator.language;
3 Object.defineProperty(navigator, 'language', {
4 configurable: true,
5 get: () => 'fr-CA',
6 });
7
8 expect(getBrowserLanguage()).toBe('fr-CA');
9
10 Object.defineProperty(navigator, 'language', {
11 configurable: true,
12 get: () => original,
13 });
14});
15
16test('getBrowserLanguage - returns fallback if navigator is undefined', () => {
17 const original = global.navigator;
18 // @ts-ignore
19 delete global.navigator;
20
21 expect(getBrowserLanguage('ru')).toBe('ru');
22
23 global.navigator = original;
24});
Common Use Cases
Internationalization (i18n)
Load locale-specific resources based on the user's browser preference.
Language-Based Redirects
Automatically navigate users to localized versions of a website or app.
Default UI Language Settings
Pre-select a language in dropdowns or form inputs during user onboarding.
Logging and Analytics
Record the user's preferred language for diagnostic or demographic analysis.