⬅️ Back to Table of Contents

📄 useNavigatorLanguage

📊 Analysis Summary

Metric	Count
🔧 Functions	1
📦 Imports	7
📐 Interfaces	2
📑 Type Aliases	1

📚 Table of Contents

• Imports
• Functions
• Interfaces
• Type Aliases

🛠️ File Location:

📂 packages/core/useNavigatorLanguage/index.ts

📦 Imports

Name	Source
ShallowRef	vue
ConfigurableWindow	../_configurable
Supportable	../types
shallowRef	vue
defaultWindow	../_configurable
useEventListener	../useEventListener
useSupported	../useSupported

---

Functions

useNavigatorLanguage(options: UseNavigatorLanguageOptions): UseNavigatorLanguageReturn

Reactive useNavigatorLanguage

Detects the currently selected user language and returns a reactive language

See: https://vueuse.org/useNavigatorLanguage

Tags: @__NO_SIDE_EFFECTS__

Raw JSDoc

/**
 *
 * Reactive useNavigatorLanguage
 *
 * Detects the currently selected user language and returns a reactive language
 * @see https://vueuse.org/useNavigatorLanguage
 *
 * @__NO_SIDE_EFFECTS__
 */

Calls:

• useSupported (from ../useSupported)
• shallowRef (from vue)
• useEventListener (from ../useEventListener)

Internal Comments:

// Listen to when to user changes language: (x3)

Code

export function useNavigatorLanguage(options: UseNavigatorLanguageOptions = {}): UseNavigatorLanguageReturn {
  const { window = defaultWindow } = options

  const navigator = window?.navigator

  const isSupported = useSupported(() => navigator && 'language' in navigator)

  const language = shallowRef<string | undefined>(navigator?.language)

  // Listen to when to user changes language:
  useEventListener(window, 'languagechange', () => {
    if (navigator)
      language.value = navigator.language
  }, { passive: true })

  return {
    isSupported,
    language,
  }
}

---

Interfaces

NavigatorLanguageState

Interface Code

export interface NavigatorLanguageState extends Supportable {
  /**
   *
   * ISO 639-1 standard Language Code
   *
   * @info The detected user agent language preference as a language tag
   * (which is sometimes referred to as a "locale identifier").
   * This consists of a 2-3 letter base language tag that indicates a
   * language, optionally followed by additional subtags separated by
   * '-'. The most common extra information is the country or region
   * variant (like 'en-US' or 'fr-CA').
   *
   *
   * @see https://www.iso.org/iso-639-language-codes.html
   * @see https://www.loc.gov/standards/iso639-2/php/code_list.php
   *
   */
  language: ShallowRef<string | undefined>
}

Properties

Name	Type	Optional	Description
language	ShallowRef<string \| undefined>	✗	not shown

UseNavigatorLanguageOptions

Interface Code

export interface UseNavigatorLanguageOptions extends ConfigurableWindow {
}

---

Type Aliases

UseNavigatorLanguageReturn

type UseNavigatorLanguageReturn = Readonly<NavigatorLanguageState>;

---

Generated by Syntax Scribe