Контент у множині / Множина в Intlayer

Як працює множина

В Intlayer контент у множині реалізується за допомогою функції plural, яка зіставляє категорії множини CLDR, zero, one, two, few, many, other, з відповідним контентом. Правильна категорія вибирається автоматично на основі активної локалі та значення лічильника за допомогою вбудованого в платформу API Intl.PluralRules.

На відміну від enu, який вибирає контент на основі числових діапазонів, визначених вами самостійно, plural делегує вибір правилам CLDR. Це робить його масштабованим для мов зі складними правилами множини, таких як українська, польська, арабська або валлійська, без необхідності вручну писати логіку по модулю.

Коли використовувати plural проти enu

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

const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
const { totalOpenings } = useIntlayer("total_openings");

return (
  <div>
    <p>{totalOpenings(count)}</p>
  </div>
);
};

export default OpeningsComponent;

"use client";

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

const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
const { totalOpenings } = useIntlayer("total_openings");

return (
  <div>
    <p>{totalOpenings(count)}</p>
  </div>
);
};

export default OpeningsComponent;

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";defineProps<{ count: number }>();const { totalOpenings } = useIntlayer("total_openings");</script><template><div>  <p>{{ totalOpenings(count) }}</p></div></template>

<script lang="ts">import { useIntlayer } from "svelte-intlayer";export let count: number;const content = useIntlayer("total_openings");</script><div><p>{$content.totalOpenings(count)}</p></div>

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

const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
const { totalOpenings } = useIntlayer("total_openings");

return (
  <div>
    <p>{totalOpenings(count)}</p>
  </div>
);
};

export default OpeningsComponent;

import type { Component } from "solid-js";
import { useIntlayer } from "solid-intlayer";

const OpeningsComponent: Component<{ count: number }> = (props) => {
const { totalOpenings } = useIntlayer("total_openings");

return (
  <div>
    <p>{totalOpenings(props.count)}</p>
  </div>
);
};

export default OpeningsComponent;

import { Component, Input } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({selector: "app-openings",template: `  <div>    <p>{{ content().totalOpenings(count) }}</p>  </div>`,})export class OpeningsComponent {@Input() count!: number;content = useIntlayer("total_openings");}

import { installIntlayer, useIntlayer } from "vanilla-intlayer";

installIntlayer();

const content = useIntlayer("total_openings").onChange((newContent) => {
document.getElementById("openings")!.textContent =
  newContent.totalOpenings(5);
});

// Initial render
document.getElementById("openings")!.textContent = content.totalOpenings(5);

Налаштування контенту у множині

Щоб налаштувати контент у множині у вашому проекті Intlayer, створіть модуль контенту, який використовує помічник plural. Категорія other є обов'язковою і використовується як резервний варіант, коли локаль не визначає більш конкретну категорію.

import { plural, t, type Dictionary } from "intlayer";

const openingsContent = {
  key: "total_openings",
  content: {
    totalOpenings: t({
      en: plural({
        one: "{{count}} opening",
        other: "{{count}} openings",
      }),
      uk: plural({
        one: "{{count}} вакансія",
        few: "{{count}} вакансії",
        many: "{{count}} вакансій",
        other: "{{count}} вакансій",
      }),
    }),
  },
} satisfies Dictionary;

export default openingsContent;

Підтримувані категорії: zero, one, two, few, many, other. Вам потрібно оголосити лише ті категорії, які використовує ваша цільова мова, Intlayer повертається до other, коли жодна конкретна категорія не підходить.

Заповнювач {{count}} автоматично замінюється лічильником, який ви передаєте під час виконання. Ви також можете включити інші заповнювачі (див. Спеціальні заповнювачі нижче).

Використання контенту у множині з React Intlayer

Щоб використовувати контент у множині всередині компонента React, отримайте його за допомогою хука useIntlayer і викличте його з лічильником. Активна локаль і лічильник поєднуються для вибору відповідної категорії CLDR.

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

const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
  const { totalOpenings } = useIntlayer("total_openings");

  return (
    <div>
      {/* Англійською:                                  */}
      {/*  count=0  → "0 openings"   (other)           */}
      {/*  count=1  → "1 opening"    (one)             */}
      {/*  count=2  → "2 openings"   (other)           */}
      {/*  count=21 → "21 openings"  (other)           */}
      <p>{totalOpenings(count)}</p>
    </div>
  );
};

export default OpeningsComponent;

Ви можете викликати повернуту функцію двома еквівалентними способами:

totalOpenings(21); // скорочення: лише лічильникtotalOpenings({ count: 21 }); // явна форма

Спеціальні заповнювачі

Рядки у множині можуть включати заповнювачі, відмінні від {{count}}. Передайте їх у формі об'єкта разом із count:

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

const inboxContent = {
  key: "inbox_summary",
  content: {
    summary: plural({
      one: "{{name}}, у вас {{count}} нове повідомлення",
      few: "{{name}}, у вас {{count}} нові повідомлення",
      many: "{{name}}, у вас {{count}} нових повідомлень",
      other: "{{name}}, у вас {{count}} нових повідомлень",
    }),
  },
} satisfies Dictionary;

export default inboxContent;

const { summary } = useIntlayer("inbox_summary");

summary({ count: 1, name: "Alice" });
// → "Alice, у вас 1 нове повідомлення"

summary({ count: 7, name: "Alice" });
// → "Alice, у вас 7 нових повідомлень"

Категорії CLDR з першого погляду

Різні мови використовують різні підмножини категорій CLDR. Кілька поширених випадків:

Вам не потрібно це запам'ятовувати, оголошуйте категорії, для яких у вас є переклади, і Intlayer за потреби повернеться до other.

Обмеження

На відміну від інших вузлів, вузол plural поки що не може бути вкладеним у дочірні вузли.

Приклад:

Дійсно:

    totalOpenings: t({      en: plural({        one: "{{count}} opening",        other: "{{count}} openings",      }),      fr: plural({        one: "{{count}} offre",        other: "{{count}} offres",      }),    }),

Недійсно:

totalOpenings: plural({  one: t({    en: "{{count}} opening",    fr: "{{count}} offre",  }),  other: t({    en: "{{count}} openings",    fr: "{{count}} offres",  }),}),

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

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

• Документація по перерахуванню (Enumeration)
• Документація по вставці (Insertion)
• Документація по Intlayer CLI
• Документація React Intlayer
• Документація Next Intlayer

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