Enumeración / Pluralización

Cómo funciona la enumeración

En Intlayer, la enumeración se logra a través de la función enu, que asigna claves específicas a su contenido correspondiente. Estas claves pueden representar valores numéricos, rangos o identificadores personalizados. Cuando se utiliza con React Intlayer o Next Intlayer, el contenido apropiado se selecciona automáticamente según la configuración regional de la aplicación y las reglas definidas.

Configuración de la enumeración

Para configurar la enumeración en tu proyecto de Intlayer, necesitas crear un módulo de contenido que incluya definiciones de enumeración. Aquí tienes un ejemplo de una enumeración simple para el número de autos:

import { enu, type Dictionary } from "intlayer";const carEnumeration = {  key: "car_count",  content: {    numberOfCar: enu({      "<-1": "Menos de menos un auto",      "-1": "Menos un auto",      "0": "Sin autos",      "1": "Un auto",      ">5": "Algunos autos",      ">19": "Muchos autos",      "fallback": "Valor por defecto", // Opcional    }),  },} satisfies Dictionary;export default carEnumeration;

En este ejemplo, enu asigna varias condiciones a contenido específico. Cuando se utiliza en un componente de React, Intlayer puede elegir automáticamente el contenido apropiado basado en la variable dada.

El orden de declaración es importante en las enumeraciones de Intlayer. La primera declaración válida es la que se seleccionará. Si se aplican múltiples condiciones, asegúrate de que estén ordenadas correctamente para evitar comportamientos inesperados.

Si no se declara un valor por defecto, la función devolverá undefined si no coincide ninguna clave.

Uso de enumeración con React Intlayer

Para usar la enumeración en un componente de React, puedes aprovechar el hook useIntlayer del paquete react-intlayer. Este hook recupera el contenido correcto basado en el ID especificado. Aquí tienes un ejemplo de cómo usarlo:

import type { FC } from "react";import { useIntlayer } from "react-intlayer";const CarComponent: FC = () => {  const { numberOfCar } = useIntlayer("car_count");  return (    <div>      <p>        {          numberOfCar(0) // Salida: Sin autos        }      </p>      <p>        {          numberOfCar(6) // Salida: Algunos autos        }      </p>      <p>        {          numberOfCar(20) // Salida: Muchos autos        }      </p>      <p>        {          numberOfCar(0.01) // Salida: Valor por defecto        }      </p>    </div>  );};

En este ejemplo, el componente ajusta dinámicamente su salida según el número de autos. El contenido correcto se elige automáticamente, dependiendo del rango especificado.

Recursos adicionales

Para obtener información más detallada sobre la configuración y el uso, consulta los siguientes recursos:

• Documentación de Intlayer CLI
• Documentación de React Intlayer
• Documentación de Next Intlayer

Estos recursos proporcionan más información sobre la configuración y el uso de Intlayer en diferentes entornos y con varios frameworks.