Dokümantasyon: react-intlayer'da t Fonksiyonu

react-intlayer paketindeki t fonksiyonu, React uygulamanızda satır içi uluslararasılaştırma için temel bir araçtır. Bileşenlerinizde doğrudan yerelleştirilmiş içerik görüntülemeyi kolaylaştırır.

Genel Bakış

t fonksiyonu, mevcut yerel ayara göre çevirileri döndürmek için bileşenlerinizde doğrudan yerel ayar kodları (örneğin, en, fr, es) ile çeviriler içeren bir nesne geçirerek kullanılır.

Temel Özellikler

• Satır İçi Çeviriler: Görsel düzenleyici olmadan hızlı, satır içi metin için idealdir.
• Otomatik Yerel Ayar Seçimi: Mevcut yerel ayara karşılık gelen çeviriyi otomatik olarak döndürür.
• TypeScript Desteği: TypeScript ile kullanıldığında tür güvenliği ve otomatik tamamlama sağlar.
• Kolay Entegrasyon: React bileşenlerinde sorunsuz çalışır.

Fonksiyon İmzası

t<T extends string>(content: Record<LocalesValues, T>, locale?: Locales): string

Parametreler

• translations: Anahtarları yerel ayar kodları (örneğin, en, fr, es) ve değerleri karşılık gelen çevrilmiş dizeler olan bir nesne.

Döndürür

• Mevcut yerel ayar için çevrilmiş içeriği temsil eden bir dize.

Kullanım Örnekleri

Bileşende t'nin Temel Kullanımı

import type { FC } from "react";
import { t } from "react-intlayer";

export const ComponentExample: FC = () => {
  return (
    <div>
      <p>
        {t({
          en: "This is an example of a component",
          fr: "Ceci est un exemple de composant",
          es: "Este es un ejemplo de componente",
        })}
      </p>
    </div>
  );
};

Özelliklerde Satır İçi Çeviriler

t fonksiyonu, JSX özelliklerinde satır içi çeviriler için özellikle kullanışlıdır. alt, title, href veya aria-label gibi özellikleri yerelleştirirken, özelliği doğrudan JSX içinde kullanabilirsiniz.

<button
  aria-label={t({
    en: "Submit",
    fr: "Soumettre",
    es: "Enviar",
  })}
>
  {t({
    en: "Submit",
    fr: "Soumettre",
    es: "Enviar",
  })}
  <img
    src="/path/to/image"
    alt={t({
      en: "A beautiful scenery",
      fr: "Un beau paysage",
      es: "Un hermoso paisaje",
    })}
  />
</button>

Gelişmiş Konular

TypeScript Entegrasyonu

t fonksiyonu, TypeScript ile kullanıldığında tür güvenlidir, gerekli tüm yerel ayarların sağlandığından emin olur.

import { t, type IConfigLocales } from "react-intlayer";

const translations: IConfigLocales<string> = {
  en: "Welcome",
  fr: "Bienvenue",
  es: "Bienvenido",
};

const greeting = t(translations);

Yerel Ayar Algılama ve Bağlam

react-intlayer'da, mevcut yerel ayar IntlayerProvider aracılığıyla yönetilir. Bileşenlerinizi saran sağlayıcının doğru şekilde ayarlandığından ve locale özelliğinin doğru geçirildiğinden emin olun.

Örnek:

import type { FC } from "react";
import type { Locales } from "intlayer";
import { IntlayerProvider } from "react-intlayer";

const App: FC<{ locale: Locales }> = ({ locale }) => (
  <IntlayerProvider locale={locale}>
    {/* Bileşenleriniz burada */}
  </IntlayerProvider>
);

Yaygın Hatalar ve Sorun Giderme

t Tanımsız veya Yanlış Çeviri Döndürüyor

• Neden: Mevcut yerel ayar doğru ayarlanmamış veya mevcut yerel ayar için çeviri eksik.
• Çözüm:
  • IntlayerProvider'ın doğru şekilde ayarlandığından emin olun.
  • Çeviriler nesnenizin gerekli tüm yerel ayarları içerdiğinden emin olun.

TypeScript'te Eksik Çeviriler

• Neden: Çeviriler nesnesi gerekli yerel ayarları karşılamıyor, TypeScript hatalarına yol açıyor.
• Çözüm: Eksik çevirileri yakalamak için IConfigLocales türünü kullanın.

const translations: IConfigLocales<string> = {
  en: "Text",
  fr: "Texte",
  // es: 'Texto', // 'es' eksik, TypeScript hatasına yol açar
};

const text = t(translations);

Etkili Kullanım İçin İpuçları

1. Basit Satır İçi Çeviriler İçin t Kullanın: Bileşenlerinizde küçük metin parçalarını çevirmek için idealdir.
2. Yapılandırılmış İçerik İçin useIntlayer'ı Tercih Edin: Daha karmaşık çeviriler ve içerik yeniden kullanımı için içerik bildirim dosyalarında tanımlayın ve useIntlayer'ı kullanın.
3. Tutarlı Yerel Ayar Sağlama: Uygulamanız genelinde yerel ayarınızın IntlayerProvider aracılığıyla tutarlı şekilde sağlandığından emin olun.
4. TypeScript'ten Yararlanın: Eksik çevirileri yakalamak ve tür güvenliğini sağlamak için TypeScript türlerini kullanın.

Sonuç

react-intlayer'daki t fonksiyonu, React uygulamalarınızda satır içi çevirileri yönetmek için güçlü ve kullanışlı bir araçtır. Etkili bir şekilde entegre ederek, uygulamanızın uluslararasılaştırma yeteneklerini geliştirir, dünya çapındaki kullanıcılara daha iyi bir deneyim sağlar.

Daha detaylı kullanım ve gelişmiş özellikler için react-intlayer dokümantasyonuna bakın.

Not: t fonksiyonunun doğru çevirileri döndürmesi için IntlayerProvider'ınızı doğru şekilde ayarladığınızdan emin olun. Bu, bileşenlerinize mevcut yerel ayarın doğru geçirilmesi için çok önemlidir.