React Entegrasyonu: useIntlayer Hook Dokümantasyonu

Bu bölüm, React uygulamalarında içerik yerelleştirmesini etkinleştirmek için useIntlayer hook'unun nasıl kullanılacağına ilişkin detaylı rehberlik sağlar.

React'te useIntlayer İçe Aktarma

useIntlayer hook'u, bağlama göre içe aktararak React uygulamalarına entegre edilebilir:

• İstemci Bileşeni:

  typescript

  İçeriği kopyala

  Kodu kopyala

  Kodu panoya kopyala

  import { useIntlayer } from "react-intlayer"; // İstemci tarafı React bileşenlerinde kullanılır

• Sunucu Bileşeni:

Parametreler

Hook iki parametre kabul eder:

1. key: Yerelleştirilmiş içerik almak için sözlük anahtarı.
2. locale (isteğe bağlı): İstenen yerel ayar. Belirtilmezse, bağlamın yerel ayarına varsayılan olur.

Sözlük

Tüm sözlük anahtarları, tür güvenliğini geliştirmek ve hataları önlemek için içerik bildirim dosyalarında bildirilmelidir. Kurulum talimatlarını burada bulabilirsiniz.

React'te Örnek Kullanım

React bileşeninde useIntlayer hook'unun gösterimi:

import type { FC } from "react";
import { ClientComponentExample, ServerComponentExample } from "@components";
import { IntlayerProvider } from "react-intlayer";
import { useIntlayer, IntlayerServerProvider } from "react-intlayer/server";
import { Locales } from "intlayer";

const App: FC<{ locale: Locales }> = ({ locale }) => {
  const content = useIntlayer("homepage", locale);

  return (
    <>
      <p>{content.introduction}</p>
      <IntlayerProvider locale={locale}>
        <ClientComponentExample />
      </IntlayerProvider>
      <IntlayerServerProvider locale={locale}>
        <ServerComponentExample />
      </IntlayerServerProvider>
    </>
  );
};

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

const ComponentExample: FC = () => {
  const content = useIntlayer("component-example");

  return (
    <div>
      <h1>{content.title}</h1>
      <p>{content.description}</p>
    </div>
  );
};

import { useIntlayer } from "react-intlayer/server";

const ServerComponentExample = () => {
  const content = useIntlayer("server-component");

  return (
    <div>
      <h1>{content.title}</h1>
      <p>{content.description}</p>
    </div>
  );
};

Özellik İşleme

Özellikleri yerelleştirirken, içerik değerlerine uygun şekilde erişin:

<button title={content.buttonTitle.value}>{content.buttonText}</button>

Ek Kaynaklar

• Intlayer Görsel Düzenleyici: Daha sezgisel içerik yönetimi için görsel düzenleyici dokümantasyonuna burada bakın.

Bu bölüm, React uygulamalarında useIntlayer hook'unun entegrasyonuna özel olarak odaklanır, yerelleştirme sürecini basitleştirir ve farklı yerel ayarlar arasında içerik tutarlılığını sağlar.