Вкладення / Посилання на підконтент

Як працює вкладення

У Intlayer вкладення реалізується за допомогою функції nest, яка дозволяє посилатися на контент з іншого словника та повторно його використовувати. Замість дублювання контенту ви можете вказати на існуючий модуль контенту за його ключем.

Налаштування вкладення

Щоб налаштувати вкладення у вашому проєкті Intlayer, спочатку визначте базовий контент, який ви хочете повторно використовувати. Далі, у окремому модулі контенту, використайте функцію nest для імпорту цього контенту.

Базовий словник

Нижче наведено приклад базового словника, який можна вкладати в інший словник:

import { type Dictionary } from "intlayer";

const firstDictionary = {
  key: "key_of_my_first_dictionary",
  content: {
    content: "content",
    subContent: {
      contentNumber: 0,
      contentString: "string",
    },
  },
} satisfies Dictionary;

export default firstDictionary;

Посилання за допомогою nest

Тепер створіть інший модуль вмісту, який використовує функцію nest для посилання на наведений вище вміст. Ви можете посилатися на весь вміст або на конкретне вкладене значення:

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

const myNestingContent = {
  key: "key_of_my_second_dictionary",
  content: {
    // Посилання на весь словник:
    fullNestedContent: nest("key_of_my_first_dictionary"),
    // Посилання на конкретне вкладене значення:
    partialNestedContent: nest(
      "key_of_my_first_dictionary",
      "subContent.contentNumber"
    ),
  },
} satisfies Dictionary;

export default myNestingContent;

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

Використання вкладення з React Intlayer

Щоб використовувати вкладений вміст у React-компоненті, скористайтеся хуком useIntlayer з пакету react-intlayer. Цей хук отримує відповідний вміст на основі вказаного ключа. Ось приклад того, як його використовувати:

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

const NestComponent: FC = () => {
  const { fullNestedContent, partialNestedContent } = useIntlayer(
    "key_of_my_second_dictionary"
  );

  return (
    <div>
      <p>
        Full Nested Content: {JSON.stringify(fullNestedContent)}
        {/* Вивід: {"content": "content", "subContent": {"contentNumber": 0, "contentString": "string"}} */}
      </p>
      <p>
        Часткове вкладене значення: {partialNestedContent}
        {/* Вивід: 0 */}
      </p>
    </div>
  );
};

export default NestComponent;

Додаткові ресурси

Для детальнішої інформації щодо конфігурації та використання зверніться до наступних ресурсів:

• Документація Intlayer CLI
• Документація React Intlayer
• Документація Next Intlayer

Ці ресурси надають додаткові відомості щодо налаштування та використання Intlayer в різних середовищах та з різними фреймворками.