Перелічення / Утворення множини

Як працює перелічення

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

Налаштування перерахувань

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

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

const carEnumeration = {
  key: "car_count",
  content: {
    numberOfCar: enu({
      "<-1": "Менше ніж -1 автомобіля",
      "-1": "Мінус один автомобіль",
      "0": "Жодних автомобілів",
      "1": "Один автомобіль",
      ">5": "Кілька автомобілів",
      ">19": "Багато автомобілів",
      "fallback": "Значення за замовчуванням", // Необов'язково
    }),
  },
} satisfies Dictionary;

export default carEnumeration;

У цьому прикладі enu відображає різні умови на конкретний вміст. При використанні в React-компоненті Intlayer може автоматично вибирати відповідний вміст на основі заданої змінної.

Порядок оголошення має значення в перерахуваннях Intlayer. Перше допустиме оголошення, те, яке буде обрано. Якщо застосовуються кілька умов, упевніться, що вони розташовані в правильному порядку, щоб уникнути непередбачуваної поведінки.

Якщо не вказано fallback, функція поверне undefined, якщо жоден ключ не підходить.

Використання перерахувань з React Intlayer

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

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

const CarComponent: FC = () => {
  const { numberOfCar } = useIntlayer("car_count");

  return (
    <div>
      <p>
        {
          numberOfCar(0) // Вивід: Немає авто
        }
      </p>
      <p>
        {
          numberOfCar(6) // Вивід: Декілька авто
        }
      </p>
      <p>
        {
          numberOfCar(20) // Вивід: Багато авто
        }
      </p>
      <p>
        {
          numberOfCar(0.01) // Вивід: Значення за замовчуванням
        }
      </p>
    </div>
  );
};

У цьому прикладі компонент динамічно підлаштовує свій вивід залежно від кількості автомобілів. Правильний вміст вибирається автоматично залежно від заданого діапазону.

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

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

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

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