In Intlayer, l'enumerazione viene realizzata tramite la funzione enu, che associa chiavi specifiche ai loro contenuti corrispondenti. Queste chiavi possono rappresentare valori numerici, intervalli o identificatori personalizzati. Quando utilizzata con React Intlayer o Next Intlayer, il contenuto appropriato viene selezionato automaticamente in base alla localizzazione dell'applicazione e alle regole definite.

Configurare l'Enumerazione

Per configurare l'enumerazione nel tuo progetto Intlayer, devi creare un modulo di contenuto che includa le definizioni di enumerazione. Ecco un esempio di una semplice enumerazione per il numero di automobili:

**/*.content.ts

Copiare il codice

Copiare il codice nella clipboard

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

const carEnumeration = {
  key: "car_count",
  content: {
    numberOfCar: enu({
      "<-1": "Meno di meno una macchina",
      "-1": "Meno una macchina",
      "0": "Nessuna macchina",
      "1": "Una macchina",
      ">5": "Alcune macchine",
      ">19": "Molte macchine",
      "fallback": "Valore di riserva", // Opzionale
    }),
  },
} satisfies Dictionary;

export default carEnumeration;

In questo esempio, enu associa varie condizioni a contenuti specifici. Quando utilizzato in un componente React, Intlayer può scegliere automaticamente il contenuto appropriato in base alla variabile fornita.

L'ordine di dichiarazione è importante nelle enumerazioni di Intlayer. La prima dichiarazione valida è quella che verrà utilizzata. Se si applicano più condizioni, assicurarsi che siano ordinate correttamente per evitare comportamenti imprevisti.

Se non viene dichiarato un valore di riserva (fallback), la funzione restituirà undefined se nessuna chiave corrisponde.

Utilizzo delle Enumerazioni con 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

Copiare il codice

Copiare il codice nella clipboard

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

Copiare il codice

Copiare il codice nella clipboard

"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

Copiare il codice

Copiare il codice nella clipboard

<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

Copiare il codice

Copiare il codice nella clipboard

<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

Copiare il codice

Copiare il codice nella clipboard

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

Copiare il codice

Copiare il codice nella clipboard

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

Copiare il codice

Copiare il codice nella clipboard

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

Copiare il codice

Copiare il codice nella clipboard

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

Risorse Aggiuntive

Per informazioni più dettagliate sulla configurazione e sull'uso, fare riferimento alle seguenti risorse:

In questo esempio, il componente si adatta dinamicamente in base al numero di auto. Il contenuto corretto viene scelto automaticamente, a seconda dell'intervallo specificato.

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

Copiare il codice

Copiare il codice nella clipboard

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

Copiare il codice

Copiare il codice nella clipboard

"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

Copiare il codice

Copiare il codice nella clipboard

<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

Copiare il codice

Copiare il codice nella clipboard

<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

Copiare il codice

Copiare il codice nella clipboard

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

Copiare il codice

Copiare il codice nella clipboard

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

Copiare il codice

Copiare il codice nella clipboard

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

Copiare il codice

Copiare il codice nella clipboard

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.

Plurale

Condizione