react-i18next से i18n
In this page:
const { t, i18n } = useTranslation();
<p>{t("key")}</p>
<p>{t("keyWithVariable", { name: value })}</p>
i18n.changeLanguage("languageCode");Hardcoded Text के बजाय Translation Keys क्यों Use करें
JSX में directly English text लिखना आपके component को permanently एक language से tie कर देता है। इसके बजाय एक translation key उपयोग करना (जैसे t('welcome.title')) एक language file से actual displayed text lookup करता है, इसलिए एक नई supported language जोड़ने का मतलब है एक नई translation file जोड़ना, component code को बिल्कुल न छूना।
उदाहरण: Why Use Translation Keys Instead of Hardcoded Text
// Run in your local React project (npm install required)
import { useTranslation } from 'react-i18next';
function Welcome() {
const { t } = useTranslation();
return <h1>{t('welcome.title')}</h1>;
}
// en.json: { "welcome": { "title": "Welcome!" } }
// fr.json: { "welcome": { "title": "Bienvenue!" } }⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
Current Language Switch करना
useTranslation hook एक i18n instance भी return करता है जिसमें एक changeLanguage function होता है। इसे call करना app-wide active language update करता है, और t function उपयोग करने वाला हर component automatically newly translated text के साथ re-render होता है।
उदाहरण: Switching the Current Language
// Run in your local React project (npm install required)
import { useTranslation } from 'react-i18next';
function LanguageSwitcher() {
const { i18n } = useTranslation();
return (
<div>
<button onClick={() => i18n.changeLanguage('en')}>English</button>
<button onClick={() => i18n.changeLanguage('fr')}>Français</button>
</div>
);
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
Pluralization और Variables Handle करना
i18next translated strings में variables interpolate करना (जैसे एक username) और एक count value के आधार पर automatically singular/plural translation forms के बीच चुनना support करता है, दोनों extra options के साथ उसी t() function के through handled।
उदाहरण: Handling Pluralization and Variables
// Run in your local React project (npm install required)
import { useTranslation } from 'react-i18next';
function Cart({ itemCount }) {
const { t } = useTranslation();
return <p>{t('cart.items', { count: itemCount })}</p>;
}
// en.json: { "cart": { "items_one": "{{count}} item", "items_other": "{{count}} items" } }⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
- JSX में directly English text hardcode करना translation keys उपयोग करने के बजाय, बाद में translation को painful बनाते हुए।
- App को i18next provider/initialization में wrap करना भूल जाना, इसलिए t() function के पास translate करने के लिए कुछ नहीं होता।
- Pluralization correctly handle न करना — '1 item' vs '2 items' को specific i18next plural key handling चाहिए, simple string concatenation नहीं।
- react-i18next React apps को कई languages में translate करने के लिए एक popular library है।
- Text translation KEYS (जैसे 'welcome.title') के through referenced होता है, current language के actual string में resolved।
- useTranslation hook एक t function देता है जो components में translated text lookup करने के लिए throughout उपयोग होता है।
- Language switching i18next की language-changing API से handle होता है, translated text को automatically re-render करते हुए।
npm install react-i18next i18next चाहिए — इस sandbox में CDN के through available नहीं; React 16.8+ के साथ काम करता है।
Chapter Quiz — Complete all 14 topics to unlock
0/14 topics done
Complete these topics first:
- Error Boundaries
- React Portals
- Modals using Portals (practical use)
- React Suspense
- Code Splitting with React.lazy
- Introduction to Server Components
- Introduction to Next.js (server-side React)
- Using React with TypeScript
- Scalable Folder Architecture
- Common React Design Patterns
- Component Documentation with Storybook
- Accessibility (a11y) in React
- i18n with react-i18next
- React Security Best Practices