React i18n

React i18n w prosty sposób

Typowana internacjonalizacja dla aplikacji React z hookami, kontekstem i bezproblemowym dostarczaniem przez 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>;
}

Funkcje

API hooków React (useTranslations)

Pełne wsparcie TypeScript z autouzupełnianiem

Lazy loading dla optymalnego rozmiaru bundla

Format ICU z pluralizacją

Interpolacja zmiennych i formatowanie

React Context do zarządzania locale

Wsparcie SSR i SSG

Hot reload podczas developmentu

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

Współpracuje z popularnymi bibliotekami i18n dla Reacta

Better I18N nie zastępuje Twojej ulubionej biblioteki i18n — to warstwa zarządzania tłumaczeniami, która czyni je jeszcze bardziej potężnymi.

Better I18N + react-intl

Najpopularniejsza biblioteka i18n dla Reacta z obsługą formatu komunikatów ICU. Używana przez tysiące aplikacji produkcyjnych.

Better I18N synchronizuje Twoje tłumaczenia bezpośrednio do formatu JSON react-intl. Edytuj w naszym panelu, a zmiany zobaczysz w aplikacji natychmiast.

Better I18N + react-i18next

Potężny framework i18n dla Reacta oparty na i18next. Funkcje takie jak przestrzenie nazw, interpolacja i liczby mnogie są wbudowane.

Eksportuj do zgodnego z i18next JSON z przestrzeniami nazw. Better I18N obsługuje workflow tłumaczeń, a i18next — runtime.

Better I18N + FormatJS

Zestaw bibliotek internacjonalizacji, w tym react-intl. Obsługuje składnię ICU Message i dane CLDR.

Better I18N natywnie wspiera format ICU. Zarządzaj złożonymi formami liczby mnogiej i selectami wizualnie, eksportuj do formatu FormatJS.

Better I18N + Lingui

Czytelna, zautomatyzowana i zoptymalizowana biblioteka i18n. Świetny DX dzięki ekstrakcji wiadomości opartej o makra.

Wyciągaj wiadomości przez Lingui CLI, zarządzaj tłumaczeniami w Better I18N i synchronizuj z powrotem automatycznie dzięki integracji GitHub.

Szybki start

Zacznij z Better I18N w aplikacji React w kilka 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

Server Components i wsparcie App Router

Vue i18n

Wsparcie Vue Composition API

Porównaj platformy

Zobacz, jak Better I18N wypada na tle alternatyw

Sprawdź i18n dla innych frameworków

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

Zacznij budować z React i18n

Dostępny darmowy plan. Bez karty kredytowej.

Zacznij za darmo Przeczytaj dokumentację