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

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

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

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

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

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

import { insert, type Dictionary } from "intlayer";const myInsertionContent = {  key: "my_key",  content: {    myInsertion: insert("Привіт, мене звати {{name}} і мені {{age}} років!"),  },} satisfies Dictionary;export default myInsertionContent;

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