Интеграция с React: Документация по хуку useDictionary

Этот раздел предоставляет подробные инструкции по использованию хука useDictionary в React-приложениях, позволяя эффективно работать с локализованным контентом без визуального редактора.

Импортирование useDictionary в React

Хук useDictionary можно интегрировать в React-приложения, импортируя его в зависимости от контекста:

• Клиентский компонент:

  import { useDictionary } from "react-intlayer"; // Используется в клиентских React-компонентах

  import { useDictionary } from "react-intlayer"; // Используется в клиентских React-компонентах

  const { useDictionary } = require("react-intlayer"); // Используется в клиентских React-компонентах

• Серверный компонент:

  import { useDictionary } from "react-intlayer/server"; // Используется в серверных React-компонентах

  import { useDictionary } from "react-intlayer/server"; // Используется в серверных React-компонентах

  const { useDictionary } = require("react-intlayer/server"); // Используется в серверных React-компонентах

Параметры

Хук принимает два параметра:

1. dictionary: Объявленный объект словаря, содержащий локализованный контент для определённых ключей.
2. locale (необязательный): Желаемая локаль. По умолчанию используется локаль текущего контекста.

Словарь

Все объекты словарей должны быть объявлены в структурированных файлах контента для обеспечения типобезопасности и предотвращения ошибок во время выполнения. Вы можете найти инструкции по настройке здесь. Вот пример объявления контента:

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;

{
  "$schema": "https://intlayer.org/schema.json",
  "key": "component-example",
  "content": {
    "title": {
      "nodeType": "translation",
      "translation": {
        "en": "Client Component Example",
        "fr": "Exemple de composant client",
        "es": "Ejemplo de componente cliente",
        "ru": "Пример клиентского компонента"
      }
    },
    "content": {
      "nodeType": "translation",
      "translation": {
        "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",
        "ru": "Это содержимое примера клиентского компонента"
      }
    }
  }
}

Пример использования в React

Ниже приведён пример использования хука useDictionary в React-компоненте:

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

Интеграция на сервере

Если вы используете хук useDictionary вне IntlayerProvider, локаль должна быть явно передана в качестве параметра при рендеринге компонента:

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

Примечания по атрибутам

В отличие от интеграций с визуальными редакторами, такие атрибуты, как buttonTitle.value, здесь не применяются. Вместо этого напрямую обращайтесь к локализованным строкам, как они объявлены в вашем контенте.

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

Дополнительные советы

• Типобезопасность: Всегда используйте Dictionary для определения ваших словарей, чтобы обеспечить типобезопасность.
• Обновления локализации: При обновлении контента убедитесь, что все локали согласованы, чтобы избежать отсутствующих переводов.

Данная документация сосредоточена на интеграции хука useDictionary, предоставляя упрощённый подход к управлению локализованным контентом без зависимости от функционала визуального редактора.