Умовний вміст / Умова в Intlayer

Як працює умова

В Intlayer умовний контент реалізується за допомогою функції cond, яка відображає конкретні умови (зазвичай булеві значення) на відповідний контент. Такий підхід дозволяє динамічно вибирати контент залежно від заданої умови. Під час інтеграції з React Intlayer або Next Intlayer відповідний контент автоматично обирається відповідно до умови, переданої під час виконання.

Налаштування умовного контенту

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

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

const myConditionalContent = {
  key: "my_key",
  content: {
    myCondition: cond({
      true: "мій контент, коли це true",
      false: "мій контент, коли це false",
      fallback: "мій контент, коли перевірка умови не спрацювала", // Необов'язково
    }),
  },
} satisfies Dictionary;

export default myConditionalContent;

Якщо не вказано fallback, останній заданий ключ буде використано як fallback, якщо умова не проходить.

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

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

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

const ConditionalComponent: FC = () => {
  const { myCondition } = useIntlayer("my_key");

  return (
    <div>
      <p>
        {
          /* Вивід: мій контент, коли це true */
          myCondition(true)
        }
      </p>
      <p>
        {
          /* Вивід: мій контент, коли це false */
          myCondition(false)
        }
      </p>
      <p>
        {
          /* Вивід: мій контент, коли умова не виконується */
          myCondition("")
        }
      </p>
      <p>
        {
          /* Вивід: мій контент, коли умова не виконується */
          myCondition(undefined)
        }
      </p>
    </div>
  );
};

export default ConditionalComponent;

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

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

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

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