Create a Multi Language React App with i18next | Using ChatGPT
Let's create a new React project from scratch with localization for English, Spanish, Japanese, and Farsi, including handling right-to-left text direction for Farsi.
HERE'S THE STEP-BY-STEP GUIDE:
1. Set Up a New React Project:
npx create-react-app react-localization-demo
cd react-localization-demo
------------------------------------------------------------------------------------------------------
Add Icons
Install react-icons for the globe icon:
npm install react-icons
------------------------------------------------------------------------------------------------------
Run Your App
Now you can run your app and see the localization in action:
npm start
------------------------------------------------------------------------------------------------------
2. Install Localization Libraries:
npm install react-i18next i18next
------------------------------------------------------------------------------------------------------
3. Create Translation Files:
-- English (src/locales/en/translation.json):
{
"welcome": "Welcome",
"description": "This is a localization demo."
}
-- Spanish (src/locales/es/translation.json):
{
"welcome": "Bienvenido",
"description": "Esta es una demostración de localización."
}
-- Japanese (src/locales/ja/translation.json):
{
"welcome": "ようこそ",
"description": "これはローカライゼーションデモです。"
}
-- Farsi (src/locales/fa/translation.json):
{
"welcome": "خوش آمدید",
"description": "این یک نمایش محلی سازی است."
}
------------------------------------------------------------------------------------------------------
4. Configure i18next:
Create an i18n.js file in the src directory to configure i18next:
// src/i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import enTranslation from './locales/en/translation.json';
import esTranslation from './locales/es/translation.json';
import jaTranslation from './locales/ja/translation.json';
import faTranslation from './locales/fa/translation.json';
i18n.use(initReactI18next).init({
resources: {
en: { translation: enTranslation },
es: { translation: esTranslation },
ja: { translation: jaTranslation },
fa: { translation: faTranslation }
},
lng: 'en', // default language
fallbackLng: 'en',
interpolation: {
escapeValue: false
}
});
export default i18n;
------------------------------------------------------------------------------------------------------
5. Initialize i18next in Your App
Wrap your application in the I18nextProvider:
------------------------------------------------------------------------------------------------------
6. Use Translations in Your Components
Use the useTranslation hook to access translations in your components and handle RTL for Farsi:
------------------------------------------------------------------------------------------------------
7. Create a Language Switcher
Create a LanguageSwitcher component to switch languages:
------------------------------------------------------------------------------------------------------
8. Style the Dropdown Menu
Create a CSS file for the LanguageSwitcher component to style the dropdown menu.
/* src/LanguageSwitcher.css */
.language-switcher {
position: relative;
display: inline-block;
}
.dropdown-button {
background: none;
border: none;
cursor: pointer;
font-size: 24px;
color: #333;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
list-style: none;
margin: 0;
padding: 0;
width: 150px;
}
.dropdown-menu li {
padding: 10px;
cursor: pointer;
transition: background-color 0.3s;
}
.dropdown-menu li:hover {
background-color: #f1f1f1;
}