Enumeracja / Pluralizacja

Jak działa enumeracja

W Intlayer enumeracja jest realizowana za pomocą funkcji enu, która mapuje określone klucze na odpowiadające im treści. Klucze te mogą reprezentować wartości liczbowe, zakresy lub niestandardowe identyfikatory. W przypadku użycia z React Intlayer lub Next Intlayer odpowiednia treść jest automatycznie wybierana na podstawie lokalizacji aplikacji i zdefiniowanych reguł.

Konfiguracja enumeracji

Aby skonfigurować enumerację w swoim projekcie Intlayer, musisz utworzyć moduł zawartości, który zawiera definicje enumeracji. Oto przykład prostej enumeracji dla liczby samochodów:

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

const carEnumeration = {
  key: "car_count",
  content: {
    numberOfCar: enu({
      "<-1": "Mniej niż minus jeden samochód",
      "-1": "Minus jeden samochód",
      "0": "Brak samochodów",
      "1": "Jeden samochód",
      ">5": "Kilka samochodów",
      ">19": "Wiele samochodów",
      "fallback": "Wartość domyślna", // Opcjonalne
    }),
  },
} satisfies Dictionary;

export default carEnumeration;

W tym przykładzie enu mapuje różne warunki na określoną treść. Gdy jest używany w komponencie React, Intlayer może automatycznie wybrać odpowiednią treść na podstawie podanej zmiennej.

Kolejność deklaracji jest ważna w enumeracjach Intlayer. Pierwsza prawidłowa deklaracja jest tą, która zostanie wybrana. Jeśli wiele warunków ma zastosowanie, upewnij się, że są one poprawnie uporządkowane, aby uniknąć nieoczekiwanego zachowania.

Jeśli nie zostanie zadeklarowana wartość domyślna (fallback), funkcja zwróci undefined, jeśli żaden klucz nie pasuje.

Używanie enumeracji z React Intlayer

Aby użyć enumeracji w komponencie React, możesz skorzystać z hooka useIntlayer z pakietu react-intlayer. Ten hook pobiera odpowiednią treść na podstawie określonego ID. Oto przykład, jak go użyć:

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

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

  return (
    <div>
      <p>
        {
          numberOfCar(0) // Wynik: Brak samochodów
        }
      </p>
      <p>
        {
          numberOfCar(6) // Wynik: Kilka samochodów
        }
      </p>
      <p>
        {
          numberOfCar(20) // Wynik: Wiele samochodów
        }
      </p>
      <p>
        {
          numberOfCar(0.01) // Wynik: Wartość domyślna
        }
      </p>
    </div>
  );
};

W tym przykładzie komponent dynamicznie dostosowuje swój wynik w zależności od liczby samochodów. Poprawna treść jest wybierana automatycznie, w zależności od określonego zakresu.

Dodatkowe zasoby

Aby uzyskać bardziej szczegółowe informacje na temat konfiguracji i użytkowania, zapoznaj się z następującymi zasobami:

• Dokumentacja Intlayer CLI
• Dokumentacja React Intlayer
• Dokumentacja Next Intlayer

Te zasoby dostarczają dodatkowych informacji na temat konfiguracji i użycia Intlayer w różnych środowiskach oraz z różnymi frameworkami.