Вставка контента / Вставка в Intlayer

Как работает вставка

В Intlayer вставка контента достигается с помощью функции insertion, которая определяет поля-заполнители в строке (например, {{name}} или {{age}}), которые могут быть динамически заменены во время выполнения. Такой подход позволяет создавать гибкие строки, похожие на шаблоны, где конкретные части контента определяются данными, переданными из вашего приложения.

При интеграции с React Intlayer или Next Intlayer вы просто предоставляете объект данных, содержащий значения для каждого заполнителя, и Intlayer автоматически отобразит контент с заменёнными заполнителями.

Настройка вставки контента

Чтобы настроить вставку контента в вашем проекте Intlayer, создайте модуль контента, который включает ваши определения вставок.

Использование вставочного контента с React Intlayer

Для использования вставочного контента внутри React-компонента импортируйте и используйте хук useIntlayer из пакета react-intlayer. Этот хук получает контент по указанному ключу и позволяет передать объект, который сопоставляет каждый заполнитель в вашем контенте со значением, которое вы хотите отобразить.

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

const InsertionComponent: FC = () => {
  const { myInsertion } = useIntlayer("my_key");

  return (
    <div>
      <p>
        {
          /* Вывод: "Привет, меня зовут John и мне 30 лет!" */
          myInsertion({ name: "John", age: "30" })
        }
      </p>
      <p>
        {
          /* Вы можете повторно использовать ту же вставку с разными значениями */
          myInsertion({ name: "Alice", age: "25" })
        }
      </p>
    </div>
  );
};

export default InsertionComponent;

Дополнительные ресурсы

Для получения более подробной информации о конфигурации и использовании обратитесь к следующим ресурсам:

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

Эти ресурсы предлагают дополнительные сведения о настройке и использовании Intlayer в различных средах и фреймворках.