React i18n făcut simplu
Internaționalizare tip-safe pentru aplicațiile React cu cârlige, context și livrare CDN fără probleme.
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>;
}Caracteristici
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>
}Funcționează cu bibliotecile populare React i18n
Better I18N nu este un înlocuitor pentru biblioteca dvs. preferată i18n - este stratul de gestionare a traducerii care le face și mai puternice.
Better I18N + react-intl
Cea mai populară bibliotecă React i18n cu suport pentru formatul mesajelor ICU. Utilizată de mii de aplicații de producție.
Better I18N vă sincronizează traducerile direct cu formatul JSON react-intl. Editați în tabloul nostru de bord, vedeți modificările în aplicația dvs. instantaneu.
Better I18N + react-i18next
Cadru i18n puternic pentru React bazat pe i18next. Caracteristici precum spațiile de nume, interpolarea și pluralurile încorporate.
Export în JSON compatibil i18next cu spații de nume. Better I18N se ocupă de fluxul de traducere, i18next se ocupă de timpul de execuție.
Better I18N + FormatJS
Un set de biblioteci pentru internaționalizare care include react-intl. Suportă sintaxa ICU Message și datele CLDR.
Un i18n mai bun acceptă nativ formatul de mesaj ICU. Gestionați vizual pluralurile complexe și selecțiile, exportați în formatul FormatJS.
Better I18N + Lingui
O bibliotecă i18n lizibilă, automatizată și optimizată. DX excelent cu extragerea mesajelor pe bază de macro.
Extrageți mesaje cu Lingui CLI, gestionați traducerile în Better I18N, sincronizați automat prin integrarea GitHub.
Start rapid
Începeți cu Better I18N în aplicația dvs. React în câteva minute.
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 →Începeți să construiți cu React i18n
Nivel gratuit disponibil. Nu este necesar un card de credit.