Enumeração / Pluralização

Como a Enumeração Funciona

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 usada com React Intlayer ou Next Intlayer, o conteúdo apropriado é selecionado automaticamente com base na localidade 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 que 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 automaticamente escolher 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á selecionada. Se múltiplas condições se aplicarem, certifique-se de que estão ordenadas corretamente para evitar comportamentos inesperados.

Se nenhum valor padrão (fallback) for declarado, a função retornará undefined caso nenhuma chave corresponda.

Usando Enumeração com React Intlayer

Para usar enumeração em um componente React, você pode utilizar o hook useIntlayer do pacote react-intlayer. Esse 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

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