Author:
    Aymeric PINEAU
    Creation:2024-08-11Last update:2025-06-29

    Enumeration / Pluralisation

    How Enumeration Works

    To use enumeration in Next.js Client Components, retrieve it via the useIntlayer hook. Here's an example:

    Setting Up Enumeration

    To set up enumeration in your Intlayer project, you need to create a content module that includes enumeration definitions. Here's an example of a simple enumeration for the number of cars:

    **/*.content.ts
    import { enu, type Dictionary } from "intlayer";

const carEnumeration = {
  key: "car_count",
  content: {
    numberOfCar: enu({
      "<-1": "Less than minus one car",
      "-1": "Minus one car",
      "0": "No cars",
      "1": "One car",
      ">5": "Some cars",
      ">19": "Many cars",
      "fallback": "Fallback value", // Optional
    }),
  },
} satisfies Dictionary;

export default carEnumeration;

    In this example, enu maps various conditions to specific content. When used in a React component, Intlayer can automatically select the appropriate content based on the given variable.

    The order of declaration is important in Intlayer enumerations. The first valid declaration is the one that will be chosen. If multiple conditions apply, ensure they are ordered correctly to avoid unexpected behaviour.
    If no fallback is declared, the function will return undefined if no keys match.

    Using Enumeration with React Intlayer

    To use enumeration in a React component, you can leverage the useIntlayer hook from the react-intlayer package. This hook retrieves the correct content based on the specified ID. Here's an example of how to use it:

    **/*.tsx
    import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

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

  return (
    <div>
      <p>
        {
          numberOfCar(0) // Output: No cars
        }
      </p>
      <p>
        {
          numberOfCar(6) // Output: Some cars
        }
      </p>
      <p>
        {
          numberOfCar(20) // Output: Many cars
        }
      </p>
      <p>
        {
          numberOfCar(0.01) // Output: Fallback value
        }
      </p>
    </div>
  );
};

    To use enumeration in Next.js Client Components, retrieve it via the useIntlayer hook. Here's an example:

    **/*.tsx
    "use client";

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

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

  return (
    <div>
      <p>{numberOfCar(6)}</p>
    </div>
  );
};

export default CarComponent;

    To use enumeration in Vue components, retrieve it via the useIntlayer hook. Here's an example:

    **/*.vue
    <script setup lang="ts">
import { useIntlayer } from "vue-intlayer";

const { numberOfCar } = useIntlayer("car_count");
</script>

<template>
  <div>
    <p>{{ numberOfCar(6) }}</p>
  </div>
</template>

    To use enumeration in Svelte components, retrieve it via the useIntlayer hook. The store is accessed with $. Here's an example:

    **/*.svelte
    <script lang="ts">
import { useIntlayer } from "svelte-intlayer";

const content = useIntlayer("car_count");
</script>

<div>
  <p>{$content.numberOfCar(6)}</p>
</div>

    To use enumeration in Preact components, retrieve it via the useIntlayer hook. Here's an example:

    **/*.tsx
    import type { FC } from "preact";
import { useIntlayer } from "preact-intlayer";

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

  return (
    <div>
      <p>{numberOfCar(6)}</p>
    </div>
  );
};

export default CarComponent;

    To use enumeration in SolidJS components, retrieve it via the useIntlayer hook. Here's an example:

    **/*.tsx
    import type { Component } from "solid-js";
import { useIntlayer } from "solid-intlayer";

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

  return (
    <div>
      <p>{numberOfCar(6)}</p>
    </div>
  );
};

export default CarComponent;

    To use enumeration in Angular components, retrieve it via the useIntlayer hook. Here's an example:

    app.component.ts
    import { Component } from "@angular/core";
import { useIntlayer } from "angular-intlayer";

@Component({
  selector: "app-car",
  template: `
    <div>
      <p>{{ content().numberOfCar(6) }}</p>
    </div>
  `,
})
export class CarComponent {
  content = useIntlayer("car_count");
}

    To use enumeration with vanilla-intlayer, retrieve it via the useIntlayer hook. Here's an example:

    **/*.ts
    import { installIntlayer, useIntlayer } from "vanilla-intlayer";

installIntlayer();

const content = useIntlayer("car_count").onChange((newContent) => {
  document.getElementById("cars")!.textContent = newContent.numberOfCar(6);
});

// Initial render
document.getElementById("cars")!.textContent = content.numberOfCar(6);

    Combining Enumeration with Insert for Ordinal Numbers

    A common use case is displaying ordinal numbers (1st, 2nd, 3rd, etc.). You can combine enu with insert to create dynamic ordinal content:

    **/*.content.ts
    import { enu, insert, type Dictionary } from "intlayer";

const rankingContent = {
  key: "ranking_component",
  content: {
    ordinal: enu({
      1: insert("{{count}}st place"),
      2: insert("{{count}}nd place"),
      3: insert("{{count}}rd place"),
      fallback: insert("{{count}}th place"),
    }),
  },
} satisfies Dictionary;

export default rankingContent;

    Using Ordinal Enumeration

    To use this in a React component, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:

    **/*.tsx
    import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const RankingComponent: FC<{ count: number }> = ({ count }) => {
  const { ordinal } = useIntlayer("ranking_component");

  // Get the last digit to determine the correct suffix
  const lastDigit = Math.abs(count) % 10;

  return (
    <div>
      <p>
        {
          ordinal(lastDigit)({ count }) // e.g., "5th place" for count=5
        }
      </p>
    </div>
  );
};

    To use this in Next.js Client Components, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:

    **/*.tsx
    "use client";

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

const RankingComponent: FC<{ count: number }> = ({ count }) => {
  const { ordinal } = useIntlayer("ranking_component");
  const lastDigit = Math.abs(count) % 10;

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

export default RankingComponent;

    To use this in Vue components, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:

    **/*.vue
    <script setup lang="ts">
import { useIntlayer } from "vue-intlayer";

defineProps<{ count: number }>();

const { ordinal } = useIntlayer("ranking_component");
</script>

<template>
  <div>
    <p>{{ ordinal(Math.abs(count) % 10)({ count }) }}</p>
  </div>
</template>

    To use this in Svelte components, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:

    **/*.svelte
    <script lang="ts">
import { useIntlayer } from "svelte-intlayer";

export let count: number;

const content = useIntlayer("ranking_component");
$: lastDigit = Math.abs(count) % 10;
</script>

<div>
  <p>{$content.ordinal(lastDigit)({ count })}</p>
</div>

    To use this in Preact components, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:

    **/*.tsx
    import type { FC } from "preact";
import { useIntlayer } from "preact-intlayer";

const RankingComponent: FC<{ count: number }> = ({ count }) => {
  const { ordinal } = useIntlayer("ranking_component");
  const lastDigit = Math.abs(count) % 10;

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

export default RankingComponent;

    To use this in SolidJS components, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:

    **/*.tsx
    import type { Component } from "solid-js";
import { useIntlayer } from "solid-intlayer";

const RankingComponent: Component<{ count: number }> = (props) => {
  const { ordinal } = useIntlayer("ranking_component");

  return (
    <div>
      <p>{ordinal(Math.abs(props.count) % 10)({ count: props.count })}</p>
    </div>
  );
};

export default RankingComponent;

    To use this in Angular components, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:

    app.component.ts
    import { Component, Input } from "@angular/core";
import { useIntlayer } from "angular-intlayer";

@Component({
  selector: "app-ranking",
  template: `
    <div>
      <p>{{ content().ordinal(lastDigit())({ count }) }}</p>
    </div>
  `,
})
export class RankingComponent {
  @Input() count!: number;

  content = useIntlayer("ranking_component");

  lastDigit() {
    return Math.abs(this.count) % 10;
  }
}

    To use this with vanilla-intlayer, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:

    **/*.ts
    import { installIntlayer, useIntlayer } from "vanilla-intlayer";

installIntlayer();

const content = useIntlayer("ranking_component");
const lastDigit = Math.abs(5) % 10;

document.getElementById("ranking")!.textContent = content.ordinal(lastDigit)({
  count: 5,
});

    Additional Resources

    For more detailed information on configuration and usage, refer to the following resources:

    These resources provide further insights into the setup and usage of Intlayer in different environments and with various frameworks.

    SelectCondition