Contenido Condicional / Condición en Intlayer

Cómo Funciona la Condición

En Intlayer, el contenido condicional se logra a través de la función cond, que asigna condiciones específicas (típicamente valores booleanos) a su contenido correspondiente. Este enfoque permite seleccionar dinámicamente el contenido basado en una condición dada. Cuando se integra con React Intlayer o Next Intlayer, el contenido apropiado se elige automáticamente según la condición proporcionada en tiempo de ejecución.

Configuración de Contenido Condicional

Para configurar contenido condicional en tu proyecto Intlayer, crea un módulo de contenido que incluya tus definiciones condicionales. A continuación, se muestran ejemplos en varios formatos.

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

const myConditionalContent = {
  key: "my_key",
  content: {
    myCondition: cond({
      true: "mi contenido cuando es verdadero",
      false: "mi contenido cuando es falso",
      fallback: "mi contenido cuando la condición falla", // Opcional
    }),
  },
} satisfies Dictionary;

export default myConditionalContent;

Si no se declara un fallback, la última clave declarada se tomará como fallback si la condición no se valida.

Uso de Contenido Condicional con React Intlayer

Para utilizar contenido condicional dentro de un componente React, importa y usa el hook useIntlayer del paquete react-intlayer. Este hook obtiene el contenido para la clave especificada y te permite pasar una condición para seleccionar la salida apropiada.

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

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

  return (
    <div>
      <p>
        {
          /* Salida: mi contenido cuando es verdadero */
          myCondition(true)
        }
      </p>
      <p>
        {
          /* Salida: mi contenido cuando es falso */
          myCondition(false)
        }
      </p>
      <p>
        {
          /* Salida: mi contenido cuando la condición falla */
          myCondition("")
        }
      </p>
      <p>
        {
          /* Salida: mi contenido cuando la condición falla */
          myCondition(undefined)
        }
      </p>
    </div>
  );
};

export default ConditionalComponent;

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 ofrecen más información sobre la configuración y el uso de Intlayer en diversos entornos y frameworks.