Language Switcher & Lazy-Loading Translations
Build a locale toggle and load translation bundles on demand to reduce initial size.
Welcome
In this lesson you will build a language switcher component and configure i18next to load translation bundles on demand, reducing the initial JavaScript payload.
Simple Language Switcher
Call i18n.changeLanguage() on button click to switch the active language. All components using useTranslation will re-render with the new language automatically.
function LanguageSwitcher() {
const { i18n } = useTranslation();
return (
<div>
{['en', 'tr', 'fr'].map(lng => (
<button
key={lng}
onClick={() => i18n.changeLanguage(lng)}
style={{ fontWeight: i18n.language === lng ? 'bold' : 'normal' }}
>
{lng.toUpperCase()}
</button>
))}
</div>
);
}All lessons in this course
- Setting Up react-i18next
- Using the useTranslation Hook
- Pluralisation & Interpolation
- Language Switcher & Lazy-Loading Translations