React i18n

Zjednodušený React i18n

Typově bezpečná internacionalizace pro aplikace React s háčky, kontextem a bezproblémovým poskytováním CDN.

Get started in 3 steps

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

Funkce

Rozhraní API React Hooks (useTranslations)

Plná podpora jazyka TypeScript s automatickým dokončováním

Líné načítání pro optimální velikost svazku

Formát zprávy ICU s plurálem

Interpolace a formátování proměnných

React Context pro správu locale

Podpora SSR a SSG

Horké načítání během vývoje

Integrace nástrojů DevTools

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

Spolupracuje s oblíbenými knihovnami React i18n

Better I18N nenahrazuje vaši oblíbenou knihovnu i18n - je to vrstva pro správu překladů, která je činí ještě výkonnějšími.

Better I18N + react-intl

Nejoblíbenější knihovna React i18n s podporou formátu zpráv ICU. Používají ji tisíce produkčních aplikací.

Lepší i18n synchronizuje překlady přímo do formátu JSON react-intl. Upravujte v našem ovládacím panelu, změny v aplikaci uvidíte okamžitě.

Better I18N + react-i18next

Výkonný framework i18n pro React založený na i18next. Integrované funkce jako jmenné prostory, interpolace a plurál.

Export do JSON kompatibilního s i18next se jmennými prostory. Lepší i18n se stará o pracovní postup překladu, i18next se stará o běh.

Better I18N + FormatJS

Sada knihoven pro internacionalizaci, která obsahuje react-intl. Podporuje syntaxi zpráv ICU a data CLDR.

Lepší i18n nativně podporuje formát zpráv ICU. Vizuální správa složitých plurálů a selektů, export do formátu FormatJS.

Better I18N + Lingui

Čitelná, automatizovaná a optimalizovaná knihovna i18n. Skvělé DX s extrakcí zpráv na základě maker.

Extrahujte zprávy pomocí Lingui CLI, spravujte překlady v aplikaci Better I18N, automaticky synchronizujte zpět prostřednictvím integrace s GitHubem.

Rychlý start

Začněte používat Better I18N ve své aplikaci React během několika minut.

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

Next.js i18n

Podpora serverových komponent a směrovače aplikací

Vue i18n

Podpora rozhraní Vue Composition API

Porovnání platforem

Podívejte se, jak se Better I18N vyrovná alternativám

Prozkoumejte i18n pro další frameworky

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 / Hono i18n

Začněte stavět s React i18n

K dispozici je bezplatná úroveň. Není vyžadována kreditní karta.

Začněte zdarma Přečtěte si dokumenty