Conteúdo Condicional / Condição no Intlayer

Como a Condição Funciona

No Intlayer, o conteúdo condicional é alcançado através da função cond, que mapeia condições específicas (tipicamente valores booleanos) para o conteúdo correspondente. Essa abordagem permite selecionar dinamicamente o conteúdo com base em uma condição fornecida. Quando integrado com React Intlayer ou Next Intlayer, o conteúdo apropriado é automaticamente escolhido de acordo com a condição fornecida em tempo de execução.

Configurando Conteúdo Condicional

Para configurar conteúdo condicional no seu projeto Intlayer, crie um módulo de conteúdo que inclua suas definições condicionais. Abaixo estão exemplos em vários formatos.

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

const myConditionalContent = {
  key: "my_key",
  content: {
    myCondition: cond({
      true: "meu conteúdo quando é verdadeiro",
      false: "meu conteúdo quando é falso",
      fallback: "meu conteúdo quando a condição falha", // Opcional
    }),
  },
} satisfies Dictionary;

export default myConditionalContent;

Se nenhum fallback for declarado, a última chave declarada será tomada como fallback se a condição não for validada.

Usando Conteúdo Condicional com React Intlayer

Para utilizar conteúdo condicional dentro de um componente React, importe e use o hook useIntlayer do pacote react-intlayer. Este hook busca o conteúdo para a chave especificada e permite que você passe uma condição para selecionar a saída apropriada.

import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const ConditionalComponent: FC = () => {
  const { myCondition } = useIntlayer("my_key");

  return (
    <div>
      <p>
        {
          /* Saída: meu conteúdo quando é verdadeiro */
          myCondition(true)
        }
      </p>
      <p>
        {
          /* Saída: meu conteúdo quando é falso */
          myCondition(false)
        }
      </p>
      <p>
        {
          /* Saída: meu conteúdo quando a condição falha */
          myCondition("")
        }
      </p>
      <p>
        {
          /* Saída: meu conteúdo quando a condição falha */
          myCondition(undefined)
        }
      </p>
    </div>
  );
};

export default ConditionalComponent;

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 oferecem mais insights sobre a configuração e uso do Intlayer em diversos ambientes e frameworks.