Вміст вставлень / Вставлення в Intlayer

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

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

При інтеграції з React Intlayer або Next Intlayer достатньо передати об'єкт даних, що містить значення для кожного плейсхолдера, і Intlayer автоматично відрендерить вміст із заміненими плейсхолдерами.

Налаштування Insertion-контенту

Щоб налаштувати insertion-контент у вашому проєкті Intlayer, створіть модуль контенту, який містить визначення вставок.

Використання вставного контенту з React Intlayer

Щоб використовувати insertion контент у React-компоненті, імпортуйте та використайте хук useIntlayer з пакету react-intlayer. Цей хук отримує контент для вказаного ключа і дозволяє передати об'єкт, який зіставляє кожен заповнювач (placeholder) у вашому контенті зі значенням, яке ви хочете відобразити.

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

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

  return (
    <div>
      <p>
        {
          /* Виведе: "Hello, my name is John and I am 30 years old!" */
          myInsertion({ name: "John", age: "30" })
        }
      </p>
      <p>
        {
          /* Ви можете повторно використовувати ту саму вставку з різними значеннями */
          myInsertion({ name: "Alice", age: "25" })
        }
      </p>
    </div>
  );
};

export default InsertionComponent;

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

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

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

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