Create a Multi Language React App with i18next | Using ChatGPT

[@bal-dez-one]

5. Initialize i18next in Your App
Wrap your application in the I18nextProvider:
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import './i18n'; // import the i18n configuration
ReactDOM.render(

,
document.getElementById('root')
);
------------------------------------------------------------------------------------------------------
6. Use Translations in Your Components
Use the useTranslation hook to access translations in your components and handle RTL for Farsi:
// src/App.js
import React, { useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import LanguageSwitcher from './LanguageSwitcher';
function App() {
const { t, i18n } = useTranslation();
useEffect(() => {
document.body.dir = i18n.language === 'fa' ? 'rtl' : 'ltr';
}, [i18n.language]);
return (

{t('welcome')}
{t('description')}

);
}
export default App;
------------------------------------------------------------------------------------------------------
7. Create a Language Switcher
Create a LanguageSwitcher component to switch languages:
// src/LanguageSwitcher.js
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { FaGlobe } from 'react-icons/fa';
import './LanguageSwitcher.css';
function LanguageSwitcher() {
const { i18n } = useTranslation();
const [dropdownOpen, setDropdownOpen] = useState(false);
const changeLanguage = (lng) => {
i18n.changeLanguage(lng);
setDropdownOpen(false); // close dropdown after selecting a language
};
const toggleDropdown = () => {
setDropdownOpen(!dropdownOpen);
};
return (


{dropdownOpen && (
changeLanguage('en')}>English
changeLanguage('es')}>Español
changeLanguage('ja')}>日本語
changeLanguage('fa')}>فارسی
)}
);
}
export default LanguageSwitcher;