Back to results for “Internationalization (i18n) in React”
React › Internationalization (i18n) in React

How would you let a user switch the language of an app using a simple dropdown menu?

Beginner

Answer

You store the currently selected language in state or context, and a select dropdown lets the user change that value. Whenever the language changes, the translation library updates so all the text on the page immediately switches to the newly chosen language.
function LanguageSwitcher() {
  const { i18n } = useTranslation();
  return (
    <select onChange={(e) => i18n.changeLanguage(e.target.value)}>
      <option value="en">English</option>
      <option value="fr">French</option>
    </select>
  );
}
Real-world example A website's header includes a simple language dropdown, and choosing a new language instantly updates every piece of translated text on the page, without needing to reload the browser.

Common follow-ups: How would you remember the user's chosen language the next time they visit the site?;Should the selected language also affect how dates and numbers are formatted?