@intlayer/docs 7.5.12 → 7.5.13

package/docs/uk/dictionary/condition.md

@@ -0,0 +1,237 @@
+---
+createdAt: 2025-02-07
+updatedAt: 2025-06-29
+title: Умовний вміст
+description: Дізнайтеся, як використовувати умовний вміст в Intlayer для динамічного відображення контенту на основі певних умов. Дотримуйтесь цієї документації, щоб ефективно реалізувати умови у вашому проєкті.
+keywords:
+  - Умовний вміст
+  - Динамічне відображення
+  - Документація
+  - Intlayer
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - doc
+  - concept
+  - content
+  - condition
+history:
+  - version: 5.5.10
+    date: 2025-06-29
+    changes: Ініціалізація історії
+---
+
+# Умовний вміст / Умова в Intlayer
+
+## Як працює умова
+
+В Intlayer умовний контент реалізується за допомогою функції `cond`, яка відображає конкретні умови (зазвичай булеві значення) на відповідний контент. Такий підхід дозволяє динамічно вибирати контент залежно від заданої умови. Під час інтеграції з React Intlayer або Next Intlayer відповідний контент автоматично обирається відповідно до умови, переданої під час виконання.
+
+## Налаштування умовного контенту
+
+Щоб налаштувати умовний контент у вашому проекті Intlayer, створіть модуль контенту, який містить ваші умовні визначення. Нижче наведено приклади в різних форматах.
+
+```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+import { cond, type Dictionary } from "intlayer";
+
+const myConditionalContent = {
+  key: "my_key",
+  content: {
+    myCondition: cond({
+      true: "мій контент, коли це true",
+      false: "мій контент, коли це false",
+      fallback: "мій контент, коли перевірка умови не спрацювала", // Необов'язково
+    }),
+  },
+} satisfies Dictionary;
+
+export default myConditionalContent;
+```
+
+```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
+import { cond } from "intlayer";
+
+/** @type {import('intlayer').Dictionary} */
+const myConditionalContent = {
+  key: "my_key",
+  content: {
+    myCondition: cond({
+      true: "мій контент, коли це true",
+      false: "мій контент, коли це false",
+      fallback: "мій контент, коли перевірка умови не спрацювала", // Необов'язково
+    }),
+  },
+};
+
+export default myConditionalContent;
+```
+
+```javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
+const { cond } = require("intlayer");
+
+/** @type {import('intlayer').Dictionary} */
+const myConditionalContent = {
+  key: "my_key",
+  content: {
+    myCondition: cond({
+      true: "мій контент, коли це true",
+      false: "мій контент, коли це false",
+      fallback: "мій контент, коли умова не виконується", // Необов'язково
+    }),
+  },
+};
+
+module.exports = myConditionalContent;
+```
+
+```json5 fileName="**/*.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "my_key",
+  "content": {
+    "myCondition": {
+      "nodeType": "condition",
+      "condition": {
+        "true": "мій контент, коли це true",
+        "false": "мій контент, коли це false",
+        "fallback": "мій контент, коли умова не виконується", // Необов'язково
+      },
+    },
+  },
+}
+```
+
+> Якщо не вказано fallback, останній заданий ключ буде використано як fallback, якщо умова не проходить.
+
+## Використання умовного контенту в React Intlayer
+
+Щоб використовувати умовний контент у React-компоненті, імпортуйте та використовуйте хук `useIntlayer` з пакета `react-intlayer`. Цей хук отримує контент для зазначеного ключа і дозволяє передати умову для вибору відповідного виводу.
+
+```tsx fileName="**/*.tsx" codeFormat="typescript"
+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;
+```
+
+```javascript fileName="**/*.mjx" codeFormat="esm"
+import { useIntlayer } from "react-intlayer";
+
+const ConditionalComponent = () => {
+  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;
+```
+
+```javascript fileName="**/*.cjs" codeFormat="commonjs"
+const { useIntlayer } = require("react-intlayer");
+
+const ConditionalComponent = () => {
+  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>
+  );
+};
+
+module.exports = ConditionalComponent;
+```
+
+## Додаткові ресурси
+
+Для детальнішої інформації щодо конфігурації та використання зверніться до наведених ресурсів:
+
+- [Документація Intlayer CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/cli/index.md)
+- [Документація React Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_with_create_react_app.md)
+- [Документація Intlayer для Next.js](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_with_nextjs_15.md)
+
+Ці ресурси надають додаткову інформацію щодо налаштування та використання Intlayer у різних середовищах та фреймворках.