Dans Intlayer, l'énumération est réalisée grâce à la fonction enu, qui associe des clés spécifiques à leur contenu correspondant. Ces clés peuvent représenter des valeurs numériques, des plages ou des identifiants personnalisés. Lorsqu'elle est utilisée avec React Intlayer ou Next Intlayer, le contenu approprié est automatiquement sélectionné en fonction de la locale de l'application et des règles définies.

Configuration de l'énumération

Pour configurer une énumération dans votre projet Intlayer, vous devez créer un module de contenu qui inclut les définitions d'énumération. Voici un exemple d'une énumération simple pour le nombre de voitures :

**/*.content.ts

Copier le code

Copier le code dans le presse-papiers

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

const carEnumeration = {
  key: "car_count",
  content: {
    numberOfCar: enu({
      "<-1": "Moins d'une voiture en dessous de moins un",
      "-1": "Moins une voiture",
      "0": "Aucune voiture",
      "1": "Une voiture",
      ">5": "Quelques voitures",
      ">19": "Beaucoup de voitures",
      "fallback": "Valeur de secours", // Optionnel
    }),
  },
} satisfies Dictionary;

export default carEnumeration;

Dans cet exemple, enu associe différentes conditions à un contenu spécifique. Lorsqu'il est utilisé dans un composant React, Intlayer peut automatiquement choisir le contenu approprié en fonction de la variable donnée.

L'ordre de déclaration est important dans les énumérations Intlayer. La première déclaration valide est celle qui sera prise en compte. Si plusieurs conditions s'appliquent, assurez-vous qu'elles sont ordonnées correctement pour éviter un comportement inattendu.

Si aucun fallback n'est déclaré, la fonction retournera undefined si aucune clé ne correspond.

Utilisation des énumérations avec 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

Copier le code

Copier le code dans le presse-papiers

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

Copier le code

Copier le code dans le presse-papiers

"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

Copier le code

Copier le code dans le presse-papiers

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";const { numberOfCar } = useIntlayer("car_count");</script><template><div>  <p>{{ numberOfCar(6) }}</p></div></template>

<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

Copier le code

Copier le code dans le presse-papiers

<script lang="ts">import { useIntlayer } from "svelte-intlayer";const content = useIntlayer("car_count");</script><div><p>{$content.numberOfCar(6)}</p></div>

<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

Copier le code

Copier le code dans le presse-papiers

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

Copier le code

Copier le code dans le presse-papiers

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

Copier le code

Copier le code dans le presse-papiers

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");}

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

Copier le code

Copier le code dans le presse-papiers

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);

Ressources supplémentaires

Pour des informations plus détaillées sur la configuration et l'utilisation, consultez les ressources suivantes :

Ces ressources fournissent des informations complémentaires sur la configuration et l'utilisation d'Intlayer dans différents environnements et avec divers frameworks.

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

Copier le code

Copier le code dans le presse-papiers

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

Copier le code

Copier le code dans le presse-papiers

"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

Copier le code

Copier le code dans le presse-papiers

<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>

<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

Copier le code

Copier le code dans le presse-papiers

<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>

<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

Copier le code

Copier le code dans le presse-papiers

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

Copier le code

Copier le code dans le presse-papiers

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

Copier le code

Copier le code dans le presse-papiers

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;}}

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

Copier le code

Copier le code dans le presse-papiers

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.

Pluriel

Condition