React SDK

React i18n făcut simplu

Internaționalizare tip-safe pentru aplicațiile React cu cârlige, context și livrare CDN fără probleme.

Setup

Installation & Setup

Get started with @better-i18n/use-intl in three steps — install, wrap your app with the provider, and start translating.

Install

Add @better-i18n/use-intl and use-intl to your project.

terminal

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.

App.tsx

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.

MyComponent.tsx

import { useTranslations } from '@better-i18n/use-intl';

function MyComponent() {
  const t = useTranslations('common');
  return <h1>{t('welcome')}</h1>;
}

Capabilities

Caracteristici

Începeți cu Better I18N în aplicația dvs. React în câteva minute.

API React Hooks (useTranslations)

Suport complet TypeScript cu autocompletare

Încărcare leneșă pentru dimensiunea optimă a pachetului

Formatul mesajului ICU cu pluralizare

Interpolarea și formatarea variabilelor

React Context pentru gestionarea locală

Sprijin SSR și SSG

Reîncărcare la cald în timpul dezvoltării

Integrarea DevTools

MyComponent.tsx

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>
  );
}

Provider fetches from the CDN once

useTranslations('common')

Every component reads from context

TtlCache · 60s

60s in-memory cache, offline fallback

t('welcome')

Keys typed from your project

Ecosystem

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.

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.

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.

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.

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.

Keep reading

Explorați i18n pentru alte cadre

Next.js i18n Vue i18n Nuxt i18n Angular i18n Svelte i18n Vite i18n Remix & Hydrogen i18n Expo i18n iOS i18n Flutter i18n TanStack Start i18n Server i18n Hono i18n Rust i18n

“Funcția de publicare prin CDN este incredibilă. Publicăm traducerile și sunt live instant — fără deploy-uri, fără invalidare de cache.”

Samet Selcuk

Fondator, Hellospace

Începeți să construiți cu React i18n

Nivel gratuit disponibil. Nu este necesar un card de credit.

Start gratuit Citiți Docs