Інтеграція з React: документація хука useDictionary

У цьому розділі наведено детальні вказівки щодо використання хука useDictionary у React-застосунках, що дозволяє ефективно працювати з локалізованим вмістом без візуального редактора.

Імпорт хука useDictionary у React

Хук useDictionary можна інтегрувати в React-застосунки, імпортуючи його залежно від контексту:

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

  import { useDictionary } from "next-intlayer"; // Використовується в клієнтських React-компонентах

  import { useDictionary } from "next-intlayer"; // Використовується в клієнтських React-компонентах

  const { useDictionary } = require("next-intlayer"); // Використовується в клієнтських React-компонентах

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

  import { useDictionary } from "next-intlayer/server"; // Використовується в серверних React-компонентах

  import { useDictionary } from "next-intlayer/server"; // Використовується в серверних React-компонентах

  const { useDictionary } = require("next-intlayer/server"); // Використовується в серверних React-компонентах

Параметри

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

1. dictionary: Оголошений об'єкт словника, що містить локалізований вміст для певних ключів.
2. locale (необов'язковий): Бажана локаль. За замовчуванням використовується локаль поточного контексту, якщо не вказано.

Словник

Усі об'єкти словників мають бути оголошені у структурованих файлах вмісту, щоб забезпечити типобезпеку та запобігти помилкам під час виконання. Інструкції зі встановлення можна знайти тут. Ось приклад декларації вмісту:

import { t, type Dictionary } from "intlayer";

const exampleContent = {
  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 exampleContent;

Приклад використання в клієнтському React-компоненті

Нижче наведено приклад того, як використовувати хук useDictionary у React-компоненті:

"use client";

import type { FC } from "react";
import { useDictionary } from "next-intlayer";
import clientComponentExampleContent from "./component.content";

const ClientComponentExample: FC = () => {
  const { title, content } = useDictionary(clientComponentExampleContent);

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

Приклад використання в React Server Component

Якщо ви використовуєте хук useDictionary поза IntlayerServerProvider, локаль має бути явно передана як параметр під час рендерингу компонента:

import type { FC } from "react";
import { useDictionary } from "next-intlayer/server";
import clientComponentExampleContent from "./component.content";

const ServerComponentExample: FC = () => {
  const { content } = useDictionary(clientComponentExampleContent);

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

Примітки щодо атрибутів

На відміну від інтеграцій, що використовують візуальні редактори, атрибути на кшталт buttonTitle.value тут не застосовуються. Натомість звертайтесь безпосередньо до локалізованих рядків, як вони оголошені у вашому контенті.

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

Додаткові поради

• Type Safety: Завжди використовуйте Dictionary для визначення ваших словників, щоб забезпечити безпеку типів.
• Оновлення локалізацій: При оновленні контенту переконайтеся, що всі locales узгоджені, щоб уникнути відсутніх перекладів.

Ця документація зосереджена на інтеграції хука useDictionary, що забезпечує оптимізований підхід до керування локалізованим контентом без покладання на функціональність візуального редактора.