I want to change language on a landing page. For that I have a select tag with 2 options: EN and NO. Initially I was saving select value to localStorage and handling select onChange event. Because of Remix server-side rendering and other stuff, I would like now to save language to a Cookie, and modify its value from select.
Main reason I would like to use cookies is to prevent this error, where server and client strings have different languages:
Cookie creation:
const cookieLanguage = createCookie('language');
const cookieHeader = request.headers.get('language');
const hasCookieLanguage = await cookieLanguage.parse(cookieHeader);
const message = hasCookieLanguage ? 'no' : 'en';
return json(
{ message },
{
headers: {
'set-cookie': await cookieLanguage.serialize({ message }),
},
},
);
Select tag:
<select
name="language"
id="language-select"
value={language}
onChange={e => changeLanguageHandler(e.target.value)}>
<option value="no" label="NO">
Norwegian
</option>
<option value="en" label="EN">
English
</option>
</select>
Translation function:
export function useLocalTranslation() {
const [language, setLanguage] = React.useState(() => 'no');
const no = useNoTranslations();
React.useEffect(() => {
const savedLanguage = localStorage.getItem('language');
if (savedLanguage) {
setLanguage(savedLanguage);
}
}, []);
const t = React.useCallback(
(key: TKey) => {
if (key === '0') return '0';
if (typeof window !== 'undefined') {
const currentLanguage = localStorage.getItem('language');
if (currentLanguage === 'no') {
return no?.[key as string] ?? en[key as TranslationsKeys] ?? key;
}
}
return en[key as TranslationsKeys] ?? key;
},
[no],
);
function changeLanguageHandler(lang: string) {
setLanguage(lang);
localStorage.setItem('language', lang);
}
return { t, language, changeLanguageHandler };
}
Currently I'm still saving select value to localStorage, but I'm not sure if this is still needed if I want to switch to Cookies.
I would like to know how to set language cookie value to selected option in Remix
