Sensors

useNavigatorLanguage

Reactively tracks the browser's preferred language via navigator.language. Automatically updates when the user changes their language preference.

Demo

Navigator Language

Not Supported

Tracks the browser's preferred language setting.

Language

—

Usage

Hook
Scope

import { 
const useNavigatorLanguage: (_options?: DeepMaybeObservable<UseNavigatorLanguageOptions>) => UseNavigatorLanguageReturn
useNavigatorLanguage } from "@usels/web";

function 
function LanguageDisplay(): JSX.Element
LanguageDisplay() {
  const { 
const isSupported$: ReadonlyObservable<boolean>
isSupported$, 
const language$: ReadonlyObservable<string | undefined>
Current browser language (e.g., "en-US")
language$ } = 
function useNavigatorLanguage(_options?: DeepMaybeObservable<UseNavigatorLanguageOptions>): UseNavigatorLanguageReturn
useNavigatorLanguage();

  return (
    <
JSX.IntrinsicElements.div: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
div>
      <
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>Supported: {
const isSupported$: ReadonlyObservable<boolean>
isSupported$.
ImmutableObservableBase<boolean>.get(trackingType?: TrackingType | GetOptions): {}
get() ? "Yes" : "No"}</
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>
      <
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>Language: {
const language$: ReadonlyObservable<string | undefined>
Current browser language (e.g., "en-US")
language$.
ImmutableObservableBase<string | undefined>.get(trackingType?: TrackingType | GetOptions): any
get()}</
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>
    </
JSX.IntrinsicElements.div: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
div>
  );
}

import { createNavigatorLanguage } from "@usels/web";

function LanguageDisplay() {
  "use scope"
  const { isSupported$, language$ } = createNavigatorLanguage();

  return (
    <div>
      <p>Supported: {isSupported$.get() ? "Yes" : "No"}</p>
      <p>Language: {language$.get()}</p>
    </div>
  );
}

Type

Parameters

Parameter	Type	Description
`_options`	`UseNavigatorLanguageOptions` (optional)	-

UseNavigatorLanguageOptions

Option	Type	Default	Description
`window`	`WindowSource`	`-`	-

Returns

UseNavigatorLanguageReturn

Name	Type	Description
`language$`	`ReadonlyObservable<string \| undefined>`	Current browser language (e.g., “en-US”)
`isSupported$`	`ReadonlyObservable<boolean>`	-

Source

View on GitHub