İçeriğe git
React i18n

Basitleştirilmiş React i18n

Hooks, context ve sorunsuz CDN dağıtımı ile React uygulamaları için tip güvenli uluslararasılaştırma.

Get started in 3 steps

1

Install

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

terminal
npm install @better-i18n/use-intl use-intl
2

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

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

Özellikler

React Hooks API (useTranslations)
Otomatik tamamlama ile tam TypeScript desteği
Optimal paket boyutu için lazy loading
Çoğullaştırma ile ICU mesaj formatı
Değişken interpolasyonu ve formatlama
Dil yönetimi için React Context
SSR ve SSG desteği
Geliştirme sırasında hot reload
DevTools entegrasyonu

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

Popüler React i18n Kütüphaneleriyle Çalışır

Better i18n favori i18n kütüphanenizin yerine geçmez - onları daha güçlü kılan çeviri yönetim katmanıdır.

Better i18n + react-intl

ICU mesaj formatı desteği ile en popüler React i18n kütüphanesi. Binlerce üretim uygulaması tarafından kullanılır.

Better i18n çevirilerinizi doğrudan react-intl JSON formatına senkronize eder. Dashboard'ımızda düzenleyin, değişiklikleri anında uygulamanızda görün.

Better i18n + react-i18next

i18next tabanlı güçlü React i18n framework'ü. Namespace'ler, interpolasyon ve çoğullama gibi özellikler dahil.

Namespace'lerle i18next uyumlu JSON'a aktarın. Better i18n çeviri iş akışını yönetir, i18next çalışma zamanını yönetir.

Better i18n + FormatJS

react-intl'i içeren uluslararasılaştırma kütüphaneleri seti. ICU Message sözdizimi ve CLDR verisini destekler.

Better i18n ICU mesaj formatını doğal olarak destekler. Karmaşık çoğullama ve seçimleri görsel olarak yönetin, FormatJS formatına aktarın.

Better i18n + Lingui

Okunabilir, otomatik ve optimize edilmiş i18n kütüphanesi. Makro tabanlı mesaj çıkarma ile harika DX.

Lingui CLI ile mesajları çıkarın, Better i18n'de çevirileri yönetin, GitHub entegrasyonu ile otomatik senkronize edin.

Hızlı Başlangıç

React uygulamanızda Better i18n ile dakikalar içinde başlayın.

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

React i18n ile İnşa Etmeye Başlayın

Ücretsiz plan mevcut. Kredi kartı gerekmez.