React Entegrasyonu: useDictionary Hook Dokümantasyonu

Bu bölüm, React uygulamalarında görsel düzenleyici olmadan yerelleştirilmiş içeriği verimli bir şekilde yönetmek için useDictionary hook'unun kullanımına ilişkin detaylı rehberlik sağlar.

React'te useDictionary İçe Aktarma

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

• İstemci Bileşeni:

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

• Sunucu Bileşeni:

  import { useDictionary } from "react-intlayer/server"; // Sunucu tarafı React bileşenlerinde kullanılır

Parametreler

Hook iki parametre kabul eder:

1. dictionary: Belirli anahtarlar için yerelleştirilmiş içerik içeren bildirilen bir sözlük nesnesi.
2. locale (isteğe bağlı): İstenen yerel ayar. Belirtilmezse, mevcut bağlamın yerel ayarına varsayılan olur.

Sözlük

Tüm sözlük nesneleri, tür güvenliğini sağlamak ve çalışma zamanı hatalarını önlemek için yapılandırılmış içerik dosyalarında bildirilmelidir. Kurulum talimatlarını burada bulabilirsiniz. İşte içerik bildirimi örneği:

import { t, type Dictionary } from "intlayer";const componentContent = {  key: "component-example",  content: {    title: t({      en: "Client Component Example",      fr: "Exemple de composant client",      es: "Ejemplo de componente cliente",    }),    content: t({      en: "This is the content of a client component example",      fr: "Ceci est le contenu d'un exemple de composant client",      es: "Este es el contenido de un ejemplo de componente cliente",    }),  },} satisfies Dictionary;export default componentContent;

React'te Örnek Kullanım

Aşağıda useDictionary hook'unun bir React bileşeninde nasıl kullanılacağına ilişkin bir örnek verilmiştir:

import type { FC } from "react";import { useDictionary } from "react-intlayer";import componentContent from "./component.content";const ComponentExample: FC = () => {  const { title, content } = useDictionary(componentContent);  return (    <div>      <h1>{title}</h1>      <p>{content}</p>    </div>  );};

Sunucu Entegrasyonu

useDictionary hook'unu IntlayerProvider dışında kullanıyorsanız, bileşeni işlerken yerel ayar açıkça parametre olarak sağlanmalıdır:

import type { FC } from "react";import { useDictionary } from "react-intlayer/server";import clientComponentExampleContent from "./component.content";const ServerComponentExample: FC<{ locale: string }> = ({ locale }) => {  const { content } = useDictionary(clientComponentExampleContent, locale);  return (    <div>      <h1>{content.title}</h1>      <p>{content.content}</p>    </div>  );};

Özellikler Hakkında Notlar

Görsel düzenleyiciler kullanan entegrasyonların aksine, buttonTitle.value gibi özellikler burada uygulanmaz. Bunun yerine, içeriği doğrudan bildirildiğiniz gibi erişin.

<button title={content.title}>{content.content}</button>

Ek İpuçları

• Tür Güvenliği: Tür güvenliğini sağlamak için her zaman sözlüklerinizi tanımlamak üzere Dictionary kullanın.
• Yerelleştirme Güncellemeleri: İçeriği güncellerken, eksik çevirileri önlemek için tüm yerel ayarların tutarlı olduğundan emin olun.

Bu dokümantasyon, useDictionary hook'unun entegrasyonuna odaklanır, görsel düzenleyici işlevlerine güvenmeden yerelleştirilmiş içeriği yönetmek için akıcı bir yaklaşım sağlar.

Doküman Geçmişi

React Integration: useDictionary Hook Documentation

This section provides detailed guidance on using the useDictionary hook within React applications, enabling efficient handling of localized content without a visual editor.

Importing useDictionary in React

The useDictionary hook can be integrated into React applications by importing it based on the context:

• Client Component:

  import { useDictionary } from "react-intlayer"; // Used in client-side React components

• Server Component:

  import { useDictionary } from "react-intlayer/server"; // Used in server-side React components

Parameters

The hook accepts two parameters:

1. dictionary: A declared dictionary object containing localized content for specific keys.
2. locale (optional): The desired locale. Defaults to the current context's locale if not specified.

Dictionary

All dictionary objects should be declared in structured content files to ensure type safety and prevent runtime errors. You can find the setup instructions here. Here's an example of content declaration:

import { t, type Dictionary } from "intlayer";const componentContent = {  key: "component-example",  content: {    title: t({      en: "Client Component Example",      fr: "Exemple de composant client",      es: "Ejemplo de componente cliente",    }),    content: t({      en: "This is the content of a client component example",      fr: "Ceci est le contenu d'un exemple de composant client",      es: "Este es el contenido de un ejemplo de componente cliente",    }),  },} satisfies Dictionary;export default componentContent;

Example Usage in React

Below is an example of how to use the useDictionary hook in a React component:

import type { FC } from "react";import { useDictionary } from "react-intlayer";import componentContent from "./component.content";const ComponentExample: FC = () => {  const { title, content } = useDictionary(componentContent);  return (    <div>      <h1>{title}</h1>      <p>{content}</p>    </div>  );};

Server Integration

If you're using the useDictionary hook outside the IntlayerProvider, the locale must be explicitly provided as a parameter when rendering the component:

import type { FC } from "react";import { useDictionary } from "react-intlayer/server";import clientComponentExampleContent from "./component.content";const ServerComponentExample: FC<{ locale: string }> = ({ locale }) => {  const { content } = useDictionary(clientComponentExampleContent, locale);  return (    <div>      <h1>{content.title}</h1>      <p>{content.content}</p>    </div>  );};

Notes on Attributes

Unlike integrations using visual editors, attributes like buttonTitle.value do not apply here. Instead, directly access the localized strings as declared in your content.

<button title={content.title}>{content.content}</button>

Additional Tips

• Type Safety: Always use Dictionary to define your dictionaries to ensure type safety.
• Localization Updates: When updating content, ensure all locales are consistent to avoid missing translations.

This documentation focuses on the integration of the useDictionary hook, providing a streamlined approach to managing localized content without relying on visual editor functionalities.

Doc History