@intlayer/docs 9.3.3 → 9.4.0

package/docs/uk/compiler.md

@@ -40,11 +40,17 @@ author: aymericzip
 
 ## Чому використовувати Intlayer Compiler?
 
+- **Автоматизація**: Усуває необхідність ручного копіювання вмісту в словники.
+
+- **Speed**: Оптимізована екстракція контенту, що забезпечує швидкість вашого процесу збірки.
+
 - **Автоматизація**: Усуває ручне копіювання та вставляння контенту у словники.
 - **Швидкість**: Оптимізоване витягування контенту забезпечує швидкість процесу збірки.
 - **Досвід розробника**: Тримайте декларації контенту там, де вони використовуються, що покращує підтримуваність.
 - **Оновлення в реальному часі**: Підтримує Hot Module Replacement (HMR) для миттєвого зворотного зв'язку під час розробки.
 
+- **Live Updates**: Підтримує Hot Module Replacement (HMR) для миттєвого зворотного зв'язку під час розробки.
+
 Див. статтю в блозі [Compiler vs. Declarative i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/uk/compiler_vs_declarative_i18n.md) для глибшого порівняння.
 
 ## Чому не використовувати Intlayer Compiler?
@@ -54,6 +60,8 @@ author: aymericzip
 - **Евристична неоднозначність**: Компілятор має вгадувати, що є контентом для користувача, а що - логікою додатка (наприклад, `className="active"`, коди статусів, ID продуктів). У складних кодових базах це може призводити до хибних спрацьовувань або пропущених рядків, що вимагатиме ручних анотацій та винятків.
 - **Тільки статична екстракція**: Екстракція на основі компілятора покладається на статичний аналіз. Рядки, які існують лише під час виконання (коди помилок API, поля CMS тощо), не можуть бути виявлені або перекладені лише компілятором, тому вам усе одно знадобиться додаткова стратегія i18n під час виконання.
 
+- **Лише статична екстракція**: Екстракція на основі компілятора спирається на статичний аналіз. Рядки, які існують лише під час виконання (коди помилок API, поля CMS тощо), не можуть бути виявлені або перекладені компілятором самостійно, тому вам все ще потрібна додаткова стратегія runtime i18n.
+
 Для глибшого архітектурного порівняння див. статтю в блозі [Compiler vs. Declarative i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/uk/compiler_vs_declarative_i18n.md).
 
 Як альтернативу, щоб автоматизувати ваш процес i18n і зберегти повний контроль над контентом, Intlayer також пропонує команду автоматичної екстракції `intlayer extract` (див. [документацію CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/cli/extract.md)), або команду `Intlayer: extract content to Dictionary` з розширення Intlayer для VS Code (див. [документацію розширення VS Code](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/vs_code_extension.md)).
@@ -94,12 +102,18 @@ export default defineConfig({
 });
 ```
 
+> Плагін `intlayerCompiler()` все ще експортується для розширених налаштувань. Реєстрація його разом з `intlayer()` є безпечною — компілятор дублює себе та запускається лише один раз.
+
 See complete tutorial: [Intlayer Compiler with Vite+React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_vite+react_compiler.md)
 
 #### Підтримка фреймворків
 
 Плагін Vite автоматично визначає та обробляє різні типи файлів:
 
+- **React / JSX / TSX**: Обробляється нативно.
+
+- **Vue**: Requires `@intlayer/vue-compiler`.
+
 - **React / JSX / TSX**: Обробляються нативно.
 - **Vue**: Потребує `@intlayer/vue-compiler`.
 - **Svelte**: Потребує `@intlayer/svelte-compiler`.

package/docs/uk/configuration.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-13
-updatedAt: 2026-08-06
+updatedAt: 2026-08-22
 title: Конфігурація
 description: Дізнайтеся, як налаштувати Intlayer для вашого додатка. Зрозумійте різні налаштування та параметри, доступні для адаптації Intlayer під ваші потреби.
 keywords:
@@ -14,6 +14,9 @@ slugs:
   - concept
   - configuration
 history:
+  - version: 9.3.3
+    date: 2026-08-22
+    changes: "Аналітику увімкнено за замовчуванням, якщо встановлено `@intlayer/analytics`"
   - version: 9.1.3
     date: 2026-08-06
     changes: "Зробити `routing.enableProxy` трипозиційним: не задано (auto), `true`, `false`"
@@ -380,8 +383,8 @@ const config: IntlayerConfig = {
   analytics: {
     /**
      * Чи увімкнено збір аналітики (перегляди сторінок, показ контенту, події A/B).
-     * Потребує встановленого `editor.clientId` для атрибуції.
-     * За замовчуванням: false
+     * Потребує встановленого пакета `@intlayer/analytics` та встановленого `editor.clientId` для атрибуції.
+     * За замовчуванням: true
      */
     enabled: true,
 
@@ -733,19 +736,17 @@ export default config;
 | `liveSyncPort`               | Порт сервера Live Sync.                                                                                                                                                 | `number`                          | `4000`                              | `4000`                                                                                          |                                                                                                                                                                                                                               |
 | `liveSyncURL`                | URL сервера Live Sync.                                                                                                                                                  | `string`                          | `'http://localhost:{liveSyncPort}'` | `'https://example.com'`                                                                         | За замовчуванням вказує на localhost; можна змінити на віддалений сервер Live Sync.                                                                                                                                           |
 
----
-
 ### Конфігурація аналітики (Analytics)
 
 Визначає налаштування, пов'язані з аналітикою Intlayer: збір даних про те, який контент дійсно показується користувачам (перегляди сторінок, показ контенту), та підтримку A/B-тестування контенту.
 
-Аналітика є суворо опціональною (opt-in): нічого не збирається, якщо `analytics.enabled` явно не встановлено в `true` **та** не налаштовано ключ проєкту (`editor.clientId`) для атрибуції. Коли вимкнено (за замовчуванням), вся інтеграція аналітики видаляється зі збірки вашого застосунку (dead-code elimination).
+Аналітика працює за принципом opt-out: вона увімкнена за замовчуванням і починає збирати дані, щойно встановлено пакет `@intlayer/analytics` **та** налаштовано ключ проєкту (`editor.clientId`) для атрибуції. Установіть `analytics.enabled` у `false` — або не встановлюйте пакет — і вся інтеграція аналітики буде видалена зі збірки вашого застосунку (dead-code elimination).
 
-| Поле            | Опис                                                                   | Тип       | За замовчуванням | Приклад | Примітка                                                                                                                               |
-| --------------- | ---------------------------------------------------------------------- | --------- | ---------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |
-| `enabled`       | Вмикає збір аналітики (перегляди сторінок, показ контенту, події A/B). | `boolean` | `false`          | `true`  | Потребує встановленого `editor.clientId` для атрибуції; інакше аналітика залишається вимкненою, навіть якщо `enabled` дорівнює `true`. |
-| `flushInterval` | Мілісекунди між автоматичними пакетними відправками на бекенд.         | `number`  | `20000`          | `10000` |                                                                                                                                        |
-| `sampleRate`    | Частка сеансів для запису, від `0` (жодного) до `1` (усі).             | `number`  | `1`              | `0.5`   | Вибірка є детермінованою для кожного сеансу, тому записаний сеанс повідомляє про всі свої події (без часткових воронок).               |
+| Поле            | Опис                                                                   | Тип       | За замовчуванням | Приклад | Примітка                                                                                                                                                                             |
+| --------------- | ---------------------------------------------------------------------- | --------- | ---------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `enabled`       | Вмикає збір аналітики (перегляди сторінок, показ контенту, події A/B). | `boolean` | `true`           | `false` | Потребує встановленого пакета `@intlayer/analytics` та встановленого `editor.clientId` для атрибуції; інакше аналітика залишається вимкненою, навіть якщо `enabled` дорівнює `true`. |
+| `flushInterval` | Мілісекунди між автоматичними пакетними відправками на бекенд.         | `number`  | `20000`          | `10000` |                                                                                                                                                                                      |
+| `sampleRate`    | Частка сеансів для запису, від `0` (жодного) до `1` (усі).             | `number`  | `1`              | `0.5`   | Вибірка є детермінованою для кожного сеансу, тому записаний сеанс повідомляє про всі свої події (без часткових воронок).                                                             |
 
 ---
 
@@ -986,6 +987,13 @@ export default config;
 
 Параметри для контролю операцій зі словниками, включаючи поведінку автоматичного заповнення та генерацію контенту.
 
+Ця конфігурація словника служить двом основним цілям:
+
+1. **Значення за замовчуванням**: Визначте значення за замовчуванням під час створення файлів оголошення вмісту
+2. **Поведінка при відсутності значення**: Надайте резервні значення, коли певні поля не визначені, що дозволяє вам визначити поведінку операцій словника глобально
+
+Для отримання додаткової інформації про файли оголошення вмісту та способи застосування значень конфігурації див. [Документацію файлу вмісту](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/dictionary/content_file.md).
+
 | Поле                        | Опис                                                                                                                                           | Тип                                                                                                             | За замовчуванням | Приклад                                                                                     | Примітки                                                                                                                                                                                                                                                                                                                                                                                                            |
 | --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | ---------------- | ------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `fill`                      | Керує генерацією вихідних файлів автоматичного заповнення (перекладів AI).                                                                     | `boolean` &#124; <br/> `FilePathPattern` &#124; <br/> `Partial<Record<Locale, boolean &#124; FilePathPattern>>` | `true`           | `{ en: '/locales/en/{{key}}.json', fr: ({ key }) => '/locales/fr/${key}.json', es: false }` | • `true`: Шлях за замовчуванням (той самий файл, що й джерело).<br/>• `false`: Вимкнено.<br/>• Шаблонний рядок/Функція дозволяє генерацію за локалями.<br/>• Об'єкт за локалями: Кожна локаль відповідає власному шаблону; `false` виключає локаль.<br/>• Включення `{{locale}}` дозволяє генерацію за локалями.<br/>• Налаштування `fill` на рівні словника завжди має пріоритет над цим глобальним налаштуванням. |
@@ -1025,8 +1033,6 @@ dictionary: {
 | `mode`   | Вказує режим логера.                  | `'default'` &#124; <br/> `'verbose'` &#124; <br/> `'disabled'` | `'default'`      | `'verbose'`        | • `'verbose'`: Записує більше інформації для відлагодження.<br/>• `'disabled'`: Повністю вимикає логер. |
 | `prefix` | Префікс для всіх повідомлень у логах. | `string`                                                       | `'[intlayer] '`  | `'[мій префікс] '` |                                                                                                         |
 
----
-
 ### Конфігурація AI (AI)
 
 Налаштування для управління можливостями AI в Intlayer, включаючи провайдера, модель та API-ключ.
@@ -1066,8 +1072,6 @@ Intlayer підтримує широкий спектр провайдерів A
 | `baseURL`            | Базовий URL для AI API.                                                                                                           | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                             | Немає            | `'https://api.openai.com/v1'` <br/> `'http://localhost:5000'` | Може вказувати на локальні або власні кінцеві точки AI API.                                                                                                                                       |
 | `dataSerialization`  | Формат серіалізації даних для функцій AI.                                                                                         | `'json'` &#124; <br/> `'toon'`                                                                                                                                                                                                                                                                                                                                                                                                                       | `undefined`      | `'toon'`                                                      | • `'json'`: за замовчуванням, надійний; використовує більше токенів.<br/>• `'toon'`: менше токенів, менш стабільно.<br/>• Передає моделі контекст як додатковий параметр (reasoning effort тощо). |
 
----
-
 ### Конфігурація збірки (Build)
 
 Параметри, що контролюють спосіб оптимізації та компіляції інтернаціоналізації вашого додатка в Intlayer.
@@ -1105,8 +1109,6 @@ Intlayer підтримує широкий спектр провайдерів A
 | `noMetadata`          | Якщо `true`, компілятор видаляє метадані словника (ключ, content wrapper) з виводу.                                                                                                                                                                                                                          | `boolean`                                                                                                       | `false`          | `false` → `{"key":"my-key","content":{"key":"value"}}` <br/> `true` → `{"key":"value"}`                                                                  | • Корисно для форматів i18next або ICU MessageFormat JSON.<br/>• Добре працює з плагіном `loadJSON`.                                                                                                                       |
 | `dictionaryKeyPrefix` | Префікс ключів словника                                                                                                                                                                                                                                                                                      | `string`                                                                                                        | `''`             |                                                                                                                                                          | Додає необов'язковий префікс до витягнутих ключів словника                                                                                                                                                                 |
 
----
-
 ### Настроювані схеми (Custom Schemas)
 
 | Поле      | Опис                                                                  | Тип                         |

package/docs/uk/custom_domains.md

@@ -138,6 +138,39 @@ getMultilingualUrls("/about", { currentDomain: "intlayer.org" });
 
 Ці абсолютні URL готові до використання в тегах `<link rel="alternate" hreflang="...">` для SEO.
 
+## Висновок типів
+
+`routing.domains` серіалізується в згенерований модуль доповнення, тому
+`getLocalizedUrl` та `getLocalizedPath` звужують їхній тип повернення до точної
+URL-адреси, яка розв'язується локаллю, маршрутизованою доменом — включаючи пригнічення префіксу.
+
+```ts
+// routing: { mode: 'prefix-no-default', domains: { en: 'intlayer.org', zh: 'intlayer.zh' } }
+
+getLocalizedUrl("/about", "zh");
+//     ^? "https://intlayer.zh/about" | "/about"
+
+getLocalizedPath("/about", "zh");
+//     ^? "/about"   (ніколи не походження, і без префіксу /zh/)
+```
+
+Тип URL — це **об'єднання** двох значень, які може повернути функція: абсолютна
+URL-адреса на домені локалі та відносна адреса, яку вона повертає, коли сторінка, що
+відображається, вже знаходиться на цьому домені. `getLocalizedPath` не має такої
+неоднозначності — вона ніколи не передає походження — тому вона залишається одним
+літералом.
+
+Локалі, які поділяють домен, також зберігають свій звичайний префікс у типі:
+
+```ts
+getLocalizedUrl("/about", "fr");
+//     ^? "https://intlayer.org/fr/about" | "/fr/about"
+```
+
+> Відновіть типи (`npx intlayer build` або будь-який запуск dev сервера) після
+> зміни `routing.domains` — звуження походить від згенерованого
+> `__RoutingRegistry`, а не від самого файлу конфігурації.
+
 ## Поведінка проксі
 
 ### Next.js
@@ -170,6 +203,8 @@ GET intlayer.zh/about
 
 Плагін Vite `intlayerProxy` застосовує ту саму логіку під час розробки:
 
+> З Intlayer v9, `intlayerProxy()` інтегрований безпосередньо в плагін `intlayer()` і включений за замовчуванням через опцію `routing.enableProxy` (`true` за замовчуванням). Окреме реєстрування, як показано нижче, тепер необов'язкове — воно зберігається для зворотної сумісності та для налаштувань, яким потрібно контролювати порядок плагінів. Встановіть `routing.enableProxy: false`, щоб відмовитися від цієї функції. Див. [примітки до версії v9](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/releases/v9.md).
+
 ```typescript fileName="vite.config.ts"
 import { defineConfig } from "vite";
 import { intlayer } from "vite-intlayer";

package/docs/uk/custom_url_rewrites.md

@@ -248,7 +248,7 @@ Intlayer внутрішньо нормалізує ці шаблони до ун
 
 <Tabs group='framework'>
   <Tab label="Next.js" value="nextjs">
-  
+
     ```tsx
     'use client';
 
@@ -263,7 +263,7 @@ Intlayer внутрішньо нормалізує ці шаблони до ун
   </Tab>
 
   <Tab label="React Router" value="reactrouter">
-  
+
     ```tsx
     'use client';
 
@@ -279,7 +279,7 @@ Intlayer внутрішньо нормалізує ці шаблони до ун
   </Tab>
 
   <Tab label="Vue" value="vue">
-  
+
     ```vue
     <script setup>
     import { useRewriteURL } from "vue-intlayer";
@@ -291,7 +291,7 @@ Intlayer внутрішньо нормалізує ці шаблони до ун
 
   </Tab>
   <Tab label="Solid" value="solid">
-  
+
     ```tsx
     import { useRewriteURL } from "solid-intlayer";
 
@@ -303,7 +303,7 @@ Intlayer внутрішньо нормалізує ці шаблони до ун
 
   </Tab>
   <Tab label="Svelte" value="svelte">
-  
+
     ```svelte
     <script>
     import { useRewriteURL } from "svelte-intlayer";
@@ -340,6 +340,8 @@ export function middleware(request: NextRequest) {
 
 Для SolidJS, Vue та Svelte Vite-плагін `intlayerProxy` керує перезаписами під час розробки.
 
+> Починаючи з Intlayer v9, `intlayerProxy()` включено безпосередньо у плагін `intlayer()` і ввімкнено за замовчуванням через параметр `routing.enableProxy` (`true` за замовчуванням). Реєстрація його окремо, як показано нижче, тепер є необов'язковою — вона зберігається для зворотної сумісності та для налаштувань, які потребують контролю порядку плагінів. Встановіть `routing.enableProxy: false`, щоб відмовитися. Дивіться [примітки до випуску v9](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/releases/v9.md).
+
 ```typescript fileName="vite.config.ts"
 import { defineConfig } from "vite";
 import { intlayer } from "vite-intlayer";

package/docs/uk/dictionary/file.md

@@ -29,174 +29,8 @@ author: aymericzip
 
 ## Чому використовувати `file` замість `import`, `require` або `fs`?
 
-<Tabs group="framework">
-  <Tab label="React" value="react">
-
-To use embedded file content in a React component, import and use the `useIntlayer` hook from the `react-intlayer` package. This retrieves the content from the specified key and allows it to be displayed dynamically.
-
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { FC } from "react";
-import { useIntlayer } from "react-intlayer";
-
-const FileComponent: FC = () => {
-  const { myFile } = useIntlayer("my_key");
-
-  return (
-    <div>
-      <pre>{myFile}</pre>
-    </div>
-  );
-};
-
-export default FileComponent;
-```
-
-  </Tab>
-  <Tab label="Next.js" value="nextjs">
-
 To use embedded file content in Next.js Client Components, retrieve it via the `useIntlayer` hook. Here's an example:
 
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-"use client";
-
-import type { FC } from "react";
-import { useIntlayer } from "next-intlayer";
-
-const FileComponent: FC = () => {
-  const { myFile } = useIntlayer("my_key");
-
-  return (
-    <div>
-      <pre>{myFile}</pre>
-    </div>
-  );
-};
-
-export default FileComponent;
-```
-
-  </Tab>
-  <Tab label="Vue" value="vue">
-
-To use embedded file content in Vue components, retrieve it via the `useIntlayer` hook. Here's an example:
-
-```vue fileName="**/*.vue"
-<script setup lang="ts">
-import { useIntlayer } from "vue-intlayer";
-
-const { myFile } = useIntlayer("my_key");
-</script>
-
-<template>
-  <div>
-    <pre>{{ myFile }}</pre>
-  </div>
-</template>
-```
-
-  </Tab>
-  <Tab label="Svelte" value="svelte">
-
-To use embedded file content in Svelte components, retrieve it via the `useIntlayer` hook. The store is accessed with `$`. Here's an example:
-
-```svelte fileName="**/*.svelte"
-<script lang="ts">
-import { useIntlayer } from "svelte-intlayer";
-
-const content = useIntlayer("my_key");
-</script>
-
-<div>
-  <pre>{$content.myFile}</pre>
-</div>
-```
-
-  </Tab>
-  <Tab label="Preact" value="preact">
-
-To use embedded file content in Preact components, retrieve it via the `useIntlayer` hook. Here's an example:
-
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { FC } from "preact";
-import { useIntlayer } from "preact-intlayer";
-
-const FileComponent: FC = () => {
-  const { myFile } = useIntlayer("my_key");
-
-  return (
-    <div>
-      <pre>{myFile}</pre>
-    </div>
-  );
-};
-
-export default FileComponent;
-```
-
-  </Tab>
-  <Tab label="Solid" value="solid">
-
-To use embedded file content in SolidJS components, retrieve it via the `useIntlayer` hook. Here's an example:
-
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { Component } from "solid-js";
-import { useIntlayer } from "solid-intlayer";
-
-const FileComponent: Component = () => {
-  const { myFile } = useIntlayer("my_key");
-
-  return (
-    <div>
-      <pre>{myFile}</pre>
-    </div>
-  );
-};
-
-export default FileComponent;
-```
-
-  </Tab>
-  <Tab label="Angular" value="angular">
-
-To use embedded file content in Angular components, retrieve it via the `useIntlayer` hook. Here's an example:
-
-```typescript fileName="app.component.ts" codeFormat="typescript"
-import { Component } from "@angular/core";
-import { useIntlayer } from "angular-intlayer";
-
-@Component({
-  selector: "app-file",
-  template: `
-    <div>
-      <pre>{{ content().myFile }}</pre>
-    </div>
-  `,
-})
-export class FileComponent {
-  content = useIntlayer("my_key");
-}
-```
-
-  </Tab>
-  <Tab label="Vanilla JS" value="vanilla">
-
-To use embedded file content with `vanilla-intlayer`, retrieve it via the `useIntlayer` hook. Here's an example:
-
-```typescript fileName="**/*.ts" codeFormat={["typescript", "esm"]}
-import { installIntlayer, useIntlayer } from "vanilla-intlayer";
-
-installIntlayer();
-
-const content = useIntlayer("my_key").onChange((newContent) => {
-  document.getElementById("file-content")!.textContent = newContent.myFile;
-});
-
-// Initial render
-document.getElementById("file-content")!.textContent = content.myFile;
-```
-
-  </Tab>
-</Tabs>
 ## Налаштування вмісту файлу
 
 Щоб вбудувати вміст файлу у ваш проект Intlayer, використовуйте функцію `file` у модулі контенту. Нижче наведені приклади, що демонструють різні реалізації.

package/docs/uk/dictionary/gender.md

@@ -27,220 +27,8 @@ author: aymericzip
 
 ## Як працює гендерна логіка
 
-<Tabs group="framework">
-  <Tab label="React" value="react">
-
-To utilize gender-based content within a React component, import and use the `useIntlayer` hook from the `react-intlayer` package. This hook fetches the content for the specified key and allows you to pass in a gender to select the appropriate output.
-
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { FC } from "react";
-import { useIntlayer } from "react-intlayer";
-
-const GenderComponent: FC = () => {
-  const { myGender } = useIntlayer("my_key");
-
-  return (
-    <div>
-      <p>
-        {
-          /* Output: my content for male users */
-          myGender("male")
-        }
-      </p>
-      <p>
-        {
-          /* Output: my content for female users */
-          myGender("female")
-        }
-      </p>
-      <p>
-        {
-          /* Output: my content for male users */
-          myGender("m")
-        }
-      </p>
-      <p>
-        {
-          /* Output: my content for female users */
-          myGender("f")
-        }
-      </p>
-      <p>
-        {
-          /* Output: my content when gender is not specified */
-          myGender("")
-        }
-      </p>
-      <p>
-        {
-          /* Output: my content when gender is not specified */
-          myGender(undefined)
-        }
-      </p>
-    </div>
-  );
-};
-
-export default GenderComponent;
-```
-
-  </Tab>
-  <Tab label="Next.js" value="nextjs">
-
 To utilize gender-based content in Next.js Client Components, retrieve it via the `useIntlayer` hook. Here's an example:
 
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-"use client";
-
-import type { FC } from "react";
-import { useIntlayer } from "next-intlayer";
-
-const GenderComponent: FC = () => {
-  const { myGender } = useIntlayer("my_key");
-
-  return (
-    <div>
-      <p>{myGender("male")}</p>
-      <p>{myGender("female")}</p>
-    </div>
-  );
-};
-
-export default GenderComponent;
-```
-
-  </Tab>
-  <Tab label="Vue" value="vue">
-
-To utilize gender-based content in Vue components, retrieve it via the `useIntlayer` hook. Here's an example:
-
-```vue fileName="**/*.vue"
-<script setup lang="ts">
-import { useIntlayer } from "vue-intlayer";
-
-const { myGender } = useIntlayer("my_key");
-</script>
-
-<template>
-  <div>
-    <p>{{ myGender("male") }}</p>
-    <p>{{ myGender("female") }}</p>
-  </div>
-</template>
-```
-
-  </Tab>
-  <Tab label="Svelte" value="svelte">
-
-To utilize gender-based content in Svelte components, retrieve it via the `useIntlayer` hook. The store is accessed with `$`. Here's an example:
-
-```svelte fileName="**/*.svelte"
-<script lang="ts">
-import { useIntlayer } from "svelte-intlayer";
-
-const content = useIntlayer("my_key");
-</script>
-
-<div>
-  <p>{$content.myGender("male")}</p>
-  <p>{$content.myGender("female")}</p>
-</div>
-```
-
-  </Tab>
-  <Tab label="Preact" value="preact">
-
-To utilize gender-based content in Preact components, retrieve it via the `useIntlayer` hook. Here's an example:
-
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { FC } from "preact";
-import { useIntlayer } from "preact-intlayer";
-
-const GenderComponent: FC = () => {
-  const { myGender } = useIntlayer("my_key");
-
-  return (
-    <div>
-      <p>{myGender("male")}</p>
-      <p>{myGender("female")}</p>
-    </div>
-  );
-};
-
-export default GenderComponent;
-```
-
-  </Tab>
-  <Tab label="Solid" value="solid">
-
-To utilize gender-based content in SolidJS components, retrieve it via the `useIntlayer` hook. Here's an example:
-
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { Component } from "solid-js";
-import { useIntlayer } from "solid-intlayer";
-
-const GenderComponent: Component = () => {
-  const { myGender } = useIntlayer("my_key");
-
-  return (
-    <div>
-      <p>{myGender("male")}</p>
-      <p>{myGender("female")}</p>
-    </div>
-  );
-};
-
-export default GenderComponent;
-```
-
-  </Tab>
-  <Tab label="Angular" value="angular">
-
-To utilize gender-based content in Angular components, retrieve it via the `useIntlayer` hook. Here's an example:
-
-```typescript fileName="app.component.ts" codeFormat="typescript"
-import { Component } from "@angular/core";
-import { useIntlayer } from "angular-intlayer";
-
-@Component({
-  selector: "app-gender",
-  template: `
-    <div>
-      <p>{{ content().myGender("male") }}</p>
-      <p>{{ content().myGender("female") }}</p>
-    </div>
-  `,
-})
-export class GenderComponent {
-  content = useIntlayer("my_key");
-}
-```
-
-  </Tab>
-  <Tab label="Vanilla JS" value="vanilla">
-
-To utilize gender-based content with `vanilla-intlayer`, retrieve it via the `useIntlayer` hook. Here's an example:
-
-```typescript fileName="**/*.ts" codeFormat={["typescript", "esm"]}
-import { installIntlayer, useIntlayer } from "vanilla-intlayer";
-
-installIntlayer();
-
-const content = useIntlayer("my_key").onChange((newContent) => {
-  document.getElementById("gender-male")!.textContent =
-    newContent.myGender("male");
-  document.getElementById("gender-female")!.textContent =
-    newContent.myGender("female");
-});
-
-// Initial render
-document.getElementById("gender-male")!.textContent = content.myGender("male");
-document.getElementById("gender-female")!.textContent =
-  content.myGender("female");
-```
-
-  </Tab>
-</Tabs>
 ## Налаштування контенту, залежного від гендера
 
 Щоб налаштувати контент залежно від гендера у вашому проекті Intlayer, створіть модуль контенту, який містить ваші визначення для конкретних гендерів. Нижче наведені приклади в різних форматах.