Enumeração / Pluralização

Como Funciona a Enumeração

No Intlayer, a enumeração é realizada através da função enu, que mapeia chaves específicas para seu conteúdo correspondente. Essas chaves podem representar valores numéricos, intervalos ou identificadores personalizados. Quando usado com React Intlayer ou Next Intlayer, o conteúdo apropriado é automaticamente selecionado com base no locale da aplicação e nas regras definidas.

Configurando a Enumeração

Para configurar a enumeração no seu projeto Intlayer, você precisa criar um módulo de conteúdo que inclua definições de enumeração. Aqui está um exemplo de uma enumeração simples para o número de carros:

import { enu, type Dictionary } from "intlayer";const carEnumeration = {  key: "car_count",  content: {    numberOfCar: enu({      "<-1": "Menos de menos um carro",      "-1": "Menos um carro",      "0": "Nenhum carro",      "1": "Um carro",      ">5": "Alguns carros",      ">19": "Muitos carros",      "fallback": "Valor padrão", // Opcional    }),  },} satisfies Dictionary;export default carEnumeration;

Neste exemplo, enu mapeia várias condições para conteúdos específicos. Quando usado em um componente React, o Intlayer pode escolher automaticamente o conteúdo apropriado com base na variável fornecida.

A ordem de declaração é importante nas enumerações do Intlayer. A primeira declaração válida é a que será escolhida. Se várias condições se aplicarem, certifique-se de que estão ordenadas corretamente para evitar comportamentos inesperados.

Se nenhum fallback for declarado, a função retornará undefined se nenhuma chave corresponder.

Usando Enumeração com React Intlayer

Para usar enumeração em um componente React, você pode utilizar o hook useIntlayer do pacote react-intlayer. Este hook recupera o conteúdo correto com base no ID especificado. Aqui está um exemplo de como usá-lo:

import type { FC } from "react";import { useIntlayer } from "react-intlayer";const CarComponent: FC = () => {  const { numberOfCar } = useIntlayer("car_count");  return (    <div>      <p>        {          numberOfCar(0) // Saída: Nenhum carro        }      </p>      <p>        {          numberOfCar(6) // Saída: Alguns carros        }      </p>      <p>        {          numberOfCar(20) // Saída: Muitos carros        }      </p>      <p>        {          numberOfCar(0.01) // Saída: Valor padrão        }      </p>    </div>  );};

Neste exemplo, o componente ajusta dinamicamente sua saída com base no número de carros. O conteúdo correto é escolhido automaticamente, dependendo do intervalo especificado.

Recursos Adicionais

Para informações mais detalhadas sobre configuração e uso, consulte os seguintes recursos:

• Documentação do Intlayer CLI
• Documentação do React Intlayer
• Documentação do Next Intlayer

Esses recursos fornecem mais informações sobre a configuração e uso do Intlayer em diferentes ambientes e com vários frameworks.