React i18n

React i18n без складнощів

Типобезпечна інтернаціоналізація для React-застосунків із hooks, context і безшовною 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>;
}

Можливості

React Hooks API (useTranslations)

Повна підтримка TypeScript з автодоповненням

Lazy loading для оптимального розміру бандла

Формат ICU-повідомлень з множиною

Інтерполяція змінних і форматування

React Context для керування локаллю

Підтримка SSR і SSG

Hot reload під час розробки

Інтеграція з 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>
}

Працює з популярними React i18n-бібліотеками

Better i18n не замінює вашу улюблену i18n-бібліотеку, а є шаром керування перекладами, який робить її ще потужнішою.

Better i18n + react-intl

Найпопулярніша React i18n-бібліотека з підтримкою ICU message format. Використовується тисячами production-застосунків.

Better i18n синхронізує переклади напряму у формат JSON для react-intl. Редагуйте в дашборді й одразу бачте зміни в застосунку.

Better i18n + react-i18next

Потужний i18n-фреймворк для React на базі i18next. Вбудовані namespaces, interpolation і plural forms.

Експортуйте в сумісний з i18next JSON із namespaces. Better i18n веде workflow перекладу, i18next відповідає за runtime.

Better i18n + FormatJS

Набір бібліотек для інтернаціоналізації, що включає react-intl. Підтримує синтаксис ICU Message та дані CLDR.

Better i18n нативно підтримує формат ICU message. Керуйте складними множинами й виборами візуально, експортуйте у формат FormatJS.

Better i18n + Lingui

Зрозуміла, автоматизована та оптимізована i18n-бібліотека. Відмінний DX з macro-базованим вилученням повідомлень.

Витягуйте повідомлення через Lingui CLI, керуйте перекладами у Better i18n та автоматично синхронізуйте назад через інтеграцію GitHub.

Швидкий старт

Почніть використовувати Better i18n у вашому React-застосунку за кілька хвилин.

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

Підтримка Server Components та App Router

Vue i18n

Підтримка Vue Composition API

Порівняти платформи

Подивіться, як Better i18n порівнюється з альтернативами

Досліджуйте i18n для інших фреймворків

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

Почніть створювати з React i18n

Доступний безкоштовний тариф. Кредитна картка не потрібна.

Почати безкоштовно Читати документацію