use-browser-language

Reads and subscribes to the browser language preferences

Source

Docs

Package

Usage

use-browser-language returns the browser language from navigator.language. The value is updated when the user changes the preferred language in the browser or operating system settings:

Your browser language: unknown

import { Code, Text } from '@mantine/core';
import { useBrowserLanguage } from '@mantine/hooks';

function Demo() {
  const language = useBrowserLanguage();

  return (
    <Text>
      Your browser language: <Code>{language ?? 'unknown'}</Code>
    </Text>
  );
}

usePreferredLanguages returns the list of the user's preferred languages from navigator.languages, the most preferred language is first. Use it to find the best match with the locales that your application supports:

Your preferred languages, most preferred first:

import { Code, List, Text } from '@mantine/core';
import { usePreferredLanguages } from '@mantine/hooks';

function Demo() {
  const languages = usePreferredLanguages();

  return (
    <>
      <Text mb="xs">Your preferred languages, most preferred first:</Text>
      <List withPadding>
        {languages.map((language) => (
          <List.Item key={language}>
            <Code>{language}</Code>
          </List.Item>
        ))}
      </List>
    </>
  );
}

Definition

function useBrowserLanguage(): string | undefined;
function usePreferredLanguages(): readonly string[];

Reacting to changes

Both hooks subscribe to the window languagechange event and update the value when it fires.

Server-side rendering

During server-side rendering and the first client render, useBrowserLanguage returns undefined and usePreferredLanguages returns an empty array. The values are set after the component is mounted.

use-validated-state

use-clipboard