React i18n आसान बनाएं
Hooks, context, और seamless CDN delivery के साथ React एप्लिकेशन्स के लिए type-safe internationalization।
Get started in 3 steps
Install
Add @better-i18n/use-intl and use-intl to your project.
npm install @better-i18n/use-intl use-intl
Wrap your app with BetterI18nProvider
Place the provider at the root of your component tree. It fetches messages from the CDN and makes them available via hooks.
import { BetterI18nProvider } from '@better-i18n/use-intl';
function App() {
return (
<BetterI18nProvider project="your-org/your-project" locale="en">
<YourApp />
</BetterI18nProvider>
);
}Use translations
Call useTranslations() in any component to access your translation keys with full TypeScript support.
import { useTranslations } from '@better-i18n/use-intl';
function MyComponent() {
const t = useTranslations('common');
return <h1>{t('welcome')}</h1>;
}फीचर्स
Installation & Setup
Get started with @better-i18n/use-intl in three steps — install, wrap your app with the provider, and start translating.
# 1. Install
npm install @better-i18n/use-intl
# 2. Wrap your app
import { BetterI18nProvider } from '@better-i18n/use-intl'
function App() {
return (
<BetterI18nProvider project="org/project" locale="en">
<YourApp />
</BetterI18nProvider>
)
}
# 3. Use translations
import { useTranslations } from '@better-i18n/use-intl'
function MyComponent() {
const t = useTranslations('common')
return <h1>{t('welcome')}</h1>
}लोकप्रिय React i18n लाइब्रेरीज़ के साथ काम करता है
Better I18N आपकी पसंदीदा i18n लाइब्रेरी का replacement नहीं है — यह translation management layer है जो उन्हें और भी शक्तिशाली बनाती है।
Better I18N + react-intl
ICU message format सपोर्ट के साथ सबसे लोकप्रिय React i18n लाइब्रेरी। हजारों प्रोडक्शन ऐप्स में इस्तेमाल होती है।
Better I18N आपकी translations को सीधे react-intl JSON format में sync करता है। हमारे डैशबोर्ड में edit करें, और बदलाव तुरंत अपनी ऐप में देखें।
Better I18N + react-i18next
i18next पर आधारित React के लिए शक्तिशाली i18n फ्रेमवर्क। namespaces, interpolation, और plurals जैसी सुविधाएँ built-in।
Namespaces के साथ i18next-compatible JSON में export करें। Better I18N translation workflow संभालता है, i18next runtime संभालता है।
Better I18N + FormatJS
Internationalization के लिए लाइब्रेरीज़ का एक सेट, जिसमें react-intl शामिल है। ICU Message syntax और CLDR data को सपोर्ट करता है।
Better I18N ICU message format को native रूप से सपोर्ट करता है। Complex plurals और selects को विज़ुअली मैनेज करें, और FormatJS format में export करें।
Better I18N + Lingui
एक readable, automated, और optimized i18n लाइब्रेरी। Macro-based message extraction के साथ शानदार DX।
Lingui CLI से messages extract करें, Better I18N में translations मैनेज करें, और GitHub integration के जरिए अपने-आप वापस sync करें।
क्विक स्टार्ट
मिनटों में अपनी React ऐप में Better I18N के साथ शुरू करें।
import { useTranslations } from '@better-i18n/use-intl';
function MyComponent() {
const t = useTranslations('common');
return (
<div>
<h1>{t('welcome')}</h1>
<p>{t('greeting', { name: 'World' })}</p>
</div>
);
}Related Articles
How to Add i18n to Shopify Hydrogen (Complete Guide)
Shopify Hydrogen is the modern way to build custom storefronts — but adding internationalization (i18n) can be challenging. You need locale-aware routing,...
Read more →Django i18n with AI Translation: Complete Setup Guide
Django i18n with AI Translation: Complete Setup Guide Django ships with a mature internationalization (i18n) framework built on GNU gettext. When you...
Read more →Introducing the Better i18n CLI: Manage Translations from Your Terminal
Until now, managing translation keys on Better i18n meant using the dashboard UI or connecting an MCP server to your AI assistant. Both work great — but...
Read more →React i18n के साथ बनाना शुरू करें
फ्री टियर उपलब्ध है। क्रेडिट कार्ड की ज़रूरत नहीं।