How to handle internationalization with Hooks in React ? Last Updated : 23 Jul, 2025 Comments Improve Suggest changes Like Article Like Report Handling internationalization (i18n) involves using the state to manage the current language and updating the UI based on the selected language. This typically includes creating language files or dictionaries for each supported language and dynamically rendering the content based on the selected language in your components. Step to Handling Internationalization with Hooks:Choose an i18n Library: Select an internationalization library for React. Popular choices include react-i18next and react-intl. Install the chosen library using npm or yarn.npm install i18next react-i18nextInitialize the i18n Library: Initialize the i18n library in your application, typically in a top-level component or in your main entry file. Configure it with the supported languages and any necessary settings. Create a Custom Hook for Language Switching: Write a custom hook, let's call it useLanguage, to handle language switching. This hook can include functions to change the current language.Use the Custom Hook in Components: Import and use the useLanguage hook in components where you want to manage language switching.Handle Translation in Components: Use the useTranslation hook from the i18n library to translate text within your components.Example: Below is an example of handling internationalization with Hooks. JavaScript // App.js import React from 'react'; import LanguageSwitcher from './components/LanguageSwticher'; import ExampleComponent from './components/Greeting'; import "../src/components/i18n" const App = () => { return ( <div> <LanguageSwitcher /> <ExampleComponent /> </div> ); }; export default App; JavaScript // i18n.js import i18n from 'i18next'; import { initReactI18next } from 'react-i18next'; i18n .use(initReactI18next) .init({ resources: { en: { translation: { greeting: 'Hello!', }, }, fr: { translation: { greeting: 'Bonjour!', }, }, }, lng: 'en', fallbackLng: 'en', interpolation: { escapeValue: false, }, }); export default i18n; JavaScript // useLanguage.js import { useState } from 'react'; import i18n from './i18n'; const useLanguage = () => { const [currentLanguage, setCurrentLanguage] = useState(i18n.language); const changeLanguage = (language) => { i18n.changeLanguage(language); setCurrentLanguage(language); }; return { currentLanguage, changeLanguage }; }; export default useLanguage; JavaScript // LanguageSwitcher.js import React from 'react'; import useLanguage from './useLanguage'; const LanguageSwitcher = () => { const { currentLanguage, changeLanguage } = useLanguage(); return ( <div> <p>Current Language: {currentLanguage}</p> <button onClick={() => changeLanguage('en')}> Switch to English </button> <button onClick={() => changeLanguage('fr')}> Switch to French </button> </div> ); }; export default LanguageSwitcher; CSS /* LanguageSwitcher.css */ .language-switcher-container { display: flex; flex-direction: column; align-items: center; padding: 20px; border: 1px solid #ccc; border-radius: 8px; margin-bottom: 20px; } button { margin-top: 10px; padding: 8px 16px; font-size: 14px; cursor: pointer; } button:hover { background-color: #f0f0f0; } Step to run the App: npm startOutput: Output Comment F faheemakt6ei Follow 0 Improve F faheemakt6ei Follow 0 Improve Article Tags : Web Technologies ReactJS MERN-QnA WebTech-FAQs Explore React Tutorial 5 min read React FundamentalsReact Introduction 6 min read React Environment Setup 3 min read React JS ReactDOM 2 min read React JSX 5 min read ReactJS Rendering Elements 3 min read React Lists 4 min read React Forms 4 min read ReactJS Keys 4 min read Components in ReactReact Components 4 min read ReactJS Functional Components 4 min read React Class Components 3 min read ReactJS Pure Components 4 min read ReactJS Container and Presentational Pattern in Components 2 min read ReactJS PropTypes 5 min read React Lifecycle 7 min read React HooksReact Hooks 8 min read React useState Hook 5 min read ReactJS useEffect Hook 5 min read Routing in ReactReact Router 5 min read React JS Types of Routers 10 min read Advanced React ConceptsLazy Loading in React and How to Implement it ? 4 min read ReactJS Higher-Order Components 5 min read Code Splitting in React 4 min read React ProjectsCreate ToDo App using ReactJS 3 min read Create a Quiz App using ReactJS 4 min read Create a Coin Flipping App using ReactJS 3 min read How to create a Color-Box App using ReactJS? 4 min read Dice Rolling App using ReactJS 4 min read Guess the number with React 3 min read Like