Is it possible to select a language using Select with options?
TangoPJ opened this issue · 2 comments
TangoPJ commented
jezmck commented
Yes, though how to do so is outside this repo's scope.
onclick change the query param
TimKraemer commented
An example with mui could look like that:
import { useRouter } from "next/router"
import { useEffect, useState } from "react"
import { useLanguageQuery, useTranslation } from "next-export-i18n"
// Import the useTranslation hook to provide translation of the language-label.
const { t } = useTranslation();
// Use the custom useLanguageQuery hook to fetch the current language query parameter e.g. {lang: "en"}.
const [query] = useLanguageQuery();
// Initialize a state variable 'language' with an empty string as its default value.
const [language, setLanguage] = useState("");
// Use the useRouter hook from Next.js to access the router object.
const router = useRouter();
// Effect hook to update the 'language' state if it's empty and there's a language query parameter.
useEffect(() => {
// only update language if the 'language' state is still empty and if there's a 'lang' query parameter.
if (language === "" && query?.lang) {
// Update the 'language' state with the value of the 'lang' query parameter (to set the browsers preferred language as the current selected).
setLanguage(query?.lang);
}
// The effect will run whenever the 'language' state or the 'lang' query parameter changes.
}, [language, query?.lang]);
// Handler function for language change events.
const handleChange = (event) => {
// Extract the new language value from the event object.
const newLanguage = event.target.value;
// Update the 'language' state with the new value.
setLanguage(newLanguage);
// Use the router to navigate to the current path but with an updated 'lang' query parameter.
router.push(
{
pathname: router.pathname,
query: { lang: newLanguage }, // Update the 'lang' query parameter with the new language.
},
undefined,
{ shallow: true } // use shallow routing, to not send an unnecessary request to the server.
);
}
<FormControl>
<InputLabel id="select-language-label">{t("language")}</InputLabel>
<Select
labelId="select-language-label"
id="language-select"
value={language}
label={t("language")}
onChange={handleChange}>
<MenuItem value="de">Deutsch</MenuItem>
<MenuItem value="en">English</MenuItem>
<MenuItem value="ru">Pусский</MenuItem>
</Select>
</FormControl>