Browser

usePreferredLanguages

Reactive browser languages. Returns a ReadonlyObservable<readonly string[]> tracking the user's preferred languages via navigator.languages, updating on the languagechange event.

Demo

Preferred Languages

Tracks the user's preferred browser languages.

Usage

Hook
Scope

import { 
const usePreferredLanguages: (options?: DeepMaybeObservable<UsePreferredLanguagesOptions>) => UsePreferredLanguagesReturn
usePreferredLanguages } from "@usels/web";

function 
function Component(): JSX.Element
Component() {
  const 
const languages$: any
languages$ = 
function usePreferredLanguages(options?: DeepMaybeObservable<UsePreferredLanguagesOptions>): UsePreferredLanguagesReturn
Framework-agnostic reactive navigator.languages tracker.
Tracks the user's preferred languages and updates whenever the languagechange
event fires on the resolved window. Must be called inside a useScope factory.
usePreferredLanguages();

  return <
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>Languages: {
const languages$: any
languages$.
any
get().
any
join(", ")}</
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>;
}

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

function Component() {
  "use scope";
  const languages$ = createPreferredLanguages();

  return <p>Languages: {languages$.get().join(", ")}</p>;
}

Type

Parameters

Parameter	Type	Description
`options`	`UsePreferredLanguagesOptions` (optional)	-

UsePreferredLanguagesOptions

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

Returns

UsePreferredLanguagesReturn

Name	Type	Description
`peek`	`{ (): readonly string[]; (): readonly string[]; }`	-
`get`	`(trackingType?: TrackingType \| GetOptions) => readonly string[]`	-
`onChange`	`(cb: ListenerFn<readonly string[]>, options?: { trackingType?: TrackingType; initial?: boolean \| undefined; immediate?: boolean \| undefined; noArgs?: boolean \| undefined; } \| undefined) => () => void`	-

Source

View on GitHub