Loading...
Please waitLoading...
Please waitSwitch UI text & formatting based on user preference, locale, and context for multi-lingual apps with runtime language switching.
pnpm dlx uselab@latest add use-adaptive-language
import * as React from "react"
import { useAdaptiveLanguage } from "@/hooks/use-adaptive-language"
export function Component() {
const { locale, setLocale } = useAdaptiveLanguage({
supportedLocales: ["en", "es", "fr", "de"],
defaultLocale: "en",
detectBrowserLocale: true,
persist: true,
})
return (
<div>
<p>Current locale: {locale}</p>
<button onClick={() => setLocale("es")}>Switch to Spanish</button>
</div>
)
}| Name | Type | Description | Default Value | Optional |
|---|---|---|---|---|
options | UseAdaptiveLanguageOptions | Configuration object for the adaptive language hook. | — | No |
supportedLocales | string[] | Array of locale codes (e.g., ["en", "es", "fr"]) that your app supports. | — | No |
defaultLocale | string | Fallback locale if browser detection fails and no stored preference exists. | First supported locale | Yes |
storageKey | string | localStorage key for persisting user preference. | "usekit:locale" | Yes |
persist | boolean | Whether to persist locale preference to localStorage. | true | Yes |
detectBrowserLocale | boolean | Whether to automatically detect and use browser/system locale. | true | Yes |
| Name | Type | Description |
|---|---|---|
locale | string | Current active locale code. |
setLocale | (locale: string) => void | Function to change the active locale. Validates against supported locales. |
isSupported | (locale: string) => boolean | Check if a locale is in the supported list. |
The hook determines the initial locale in the following order:
persist: true) - Previously saved user preferencedetectBrowserLocale: true) - Matches browser/system languagesupportedLocalesconst { locale, setLocale } = useAdaptiveLanguage({
supportedLocales: ["en", "es", "fr"],
persist: true, // Saves preference to localStorage
})const { locale, setLocale } = useAdaptiveLanguage({
supportedLocales: ["en", "es"],
defaultLocale: "en",
detectBrowserLocale: false, // Always use defaultLocale
})// The hook automatically syncs locale changes across browser tabs
// via the storage event API when persist: true
const { locale } = useAdaptiveLanguage({
supportedLocales: ["en", "es", "fr"],
persist: true,
})import { useTranslation } from "react-i18next"
import { useAdaptiveLanguage } from "@/hooks/use-adaptive-language"
function MyComponent() {
const { locale, setLocale } = useAdaptiveLanguage({
supportedLocales: ["en", "es", "fr"],
})
const { i18n } = useTranslation()
React.useEffect(() => {
i18n.changeLanguage(locale)
}, [locale, i18n])
return <button onClick={() => setLocale("es")}>Español</button>
}document.documentElement.lang when the locale changes, which helps with screen readers and SEO."en-US") and language codes (e.g., "en").en
Welcome to our app
This is a demonstration of adaptive language switching.
Document language attribute
document.documentElement.lang = "en"The document lang attribute is automatically updated when the locale changes.