📡 You're offline — showing cached content
⚡ New version available!
Quick Access
🗺️ Roadmaps 🃏 Flashcards 📚 Series 🎓 Tutorials 🗺️ My Path 🎤 Mock Interview ⚡ Cheat Code 📄 Resume Builder 🛠️ Dev Tools
Tutorials › React Modern Development › Internationalization

Internationalization

5 min read
react-i18next handles translations in React. Wrap the app in I18nextProvider, define JSON translation files per language, and use the t() function hook. Switch languages at runtime with i18n.changeLanguage().

i18n with react-i18next

npm install i18next react-i18next

import { useTranslation } from "react-i18next";

function Header() {
  const { t, i18n } = useTranslation();
  return (
    

      
{t("welcome")}

      
    

  );
}

// en.json
// { "welcome": "Welcome!" }
// fr.json
// { "welcome": "Bienvenue!" }