React Entegrasyonu: useI18n Hook Dokümantasyonu

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

React'te useI18n İçe Aktarma

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

• İstemci Bileşenleri:

  typescript

  Kodu kopyala

  Kodu panoya kopyala

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

• Sunucu Bileşenleri:

Parametreler

Bu hook iki parametre kabul eder:

1. namespace: Çeviri anahtarlarını kapsamak için bir sözlük ad alanı.
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. Yapılandırma talimatlarını burada bulabilirsiniz.

React'te Kullanım Örnekleri

React bileşenlerinde useI18n hook'unun kullanımı örnekleri:

import type { FC } from "react";import { ClientComponentExample, ServerComponentExample } from "@components";import { IntlayerProvider } from "react-intlayer";import { useI18n, IntlayerServerProvider } from "react-intlayer/server";import { Locales } from "intlayer";const App: FC<{ locale: Locales }> = ({ locale }) => {  const t = useI18n("home-page", locale);  return (    <>      <p>{t("introduction")}</p>      <IntlayerProvider locale={locale}>        <ClientComponentExample />      </IntlayerProvider>      <IntlayerServerProvider locale={locale}>        <ServerComponentExample />      </IntlayerServerProvider>    </>  );};

import type { FC } from "react";import { useI18n } from "react-intlayer";const ComponentExample: FC = () => {  const t = useI18n("component-example");  return (    <div>      <h1>{t("title")}</h1> {/* Başlığı görüntüle */}      <p>{t("description")}</p> {/* Açıklamayı görüntüle */}    </div>  );};

import { useI18n } from "react-intlayer/server";const ServerComponentExample = () => {  const t = useI18n("server-component");  return (    <div>      <h1>{t("title")}</h1> {/* Başlığı görüntüle */}      <p>{t("description")}</p> {/* Açıklamayı görüntüle */}    </div>  );};

Özellik İşleme

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

<!-- Erişilebilirlik özellikleri için (örneğin, aria-label), saf dizeler gerekli olduğundan .value kullanın --><button aria-label={t("button.ariaLabel").value}>{t("button.text")}</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 useI18n 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.

Dokümantasyon Geçmişi

• 6.0.0 - 2025-06-29: useI18n hook dokümantasyonunun ilk yazımı

React Integration: useI18n Hook Documentation

This section provides detailed guidance on how to use the useI18n hook within React applications, enabling efficient content localization.

Importing useI18n in React

The useI18n hook can be imported and integrated into React applications according to the context as follows:

• Client Components:

  typescript

  Kodu kopyala

  Kodu panoya kopyala

  import { useI18n } from "react-intlayer"; // Use in client-side React components

• Server Components:

Parameters

This hook accepts two parameters:

1. namespace: A dictionary namespace to scope the translation keys.
2. locale (optional): The desired locale. If not specified, the context's locale will be used as default.

Dictionary

All dictionary keys must be declared within content declaration files to enhance type safety and prevent errors. Configuration instructions can be found here.

Usage Examples in React

Examples of using the useI18n hook within React components:

import type { FC } from "react";import { ClientComponentExample, ServerComponentExample } from "@components";import { IntlayerProvider } from "react-intlayer";import { useI18n, IntlayerServerProvider } from "react-intlayer/server";import { Locales } from "intlayer";const App: FC<{ locale: Locales }> = ({ locale }) => {  const t = useI18n("home-page", locale);  return (    <>      <p>{t("introduction")}</p>      <IntlayerProvider locale={locale}>        <ClientComponentExample />      </IntlayerProvider>      <IntlayerServerProvider locale={locale}>        <ServerComponentExample />      </IntlayerServerProvider>    </>  );};

import type { FC } from "react";import { useI18n } from "react-intlayer";const ComponentExample: FC = () => {  const t = useI18n("component-example");  return (    <div>      <h1>{t("title")}</h1> {/* Display the title */}      <p>{t("description")}</p> {/* Display the description */}    </div>  );};

import { useI18n } from "react-intlayer/server";const ServerComponentExample = () => {  const t = useI18n("server-component");  return (    <div>      <h1>{t("title")}</h1> {/* Display the title */}      <p>{t("description")}</p> {/* Display the description */}    </div>  );};

Attribute Handling

When localizing attributes, access the translation values appropriately:

<!-- For accessibility attributes (e.g., aria-label), use .value since pure strings are required --><button aria-label={t("button.ariaLabel").value}>{t("button.text")}</button>

Additional Resources

• Intlayer Visual Editor: For a more intuitive content management experience, refer to the visual editor documentation here.

This section specifically covers the integration of the useI18n hook in React applications, simplifying the localization process and ensuring content consistency across different locales.

Documentation History

• 6.0.0 - 2025-06-29: Initial writing of useI18n hook documentation