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

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

У 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 в різних середовищах та з різними фреймворками.