Function to change the language
Basic language change
import { useChangeLanguage } from '@auth0/auth0-acul-react';
const LanguageSelector = () => {
const changeLanguage = useChangeLanguage();
const handleLanguageChange = async (lang: string) => {
await changeLanguage({
language: lang,
persist: 'session'
});
};
return (
<div>
<button onClick={() => handleLanguageChange('en')}>English</button>
<button onClick={() => handleLanguageChange('fr')}>Français</button>
<button onClick={() => handleLanguageChange('es')}>Español</button>
</div>
);
};
With tenant enabled locales
import { useChangeLanguage, useCurrentScreen } from '@auth0/auth0-acul-react';
const LanguageSelector = () => {
const changeLanguage = useChangeLanguage();
const screenOptions = useCurrentScreen();
const tenant = screenOptions?.tenant;
const transaction = screenOptions?.transaction;
const handleChangeLanguage = async (language: string) => {
try {
await changeLanguage({ language, persist: 'session' });
} catch (error) {
console.error('Failed to change language:', error);
}
};
return (
<>
{tenant?.enabledLocales && (
<div>
<label htmlFor="language-select">
Language
</label>
<select
id="language-select"
onChange={(e) => handleChangeLanguage(e.target.value)}
defaultValue={transaction?.locale}
>
{tenant.enabledLocales.map((locale: string) => (
<option key={locale} value={locale}>
{locale.toUpperCase()}
</option>
))}
</select>
</div>
)}
</>
);
};
React hook that provides a function to change the language/locale.
This hook returns a function that triggers a language change by submitting the new locale preference to the server with the 'change-language' action. The language change will cause the current screen to re-render with the new locale.
Parameters
The returned function accepts
LanguageChangeOptions:language(required) - Short language name (locale code) to be set (e.g., 'en', 'fr', 'es')persist(required) - Persistence scope for the language preference (defaults to 'session')Key Points