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 le permite seleccionar dinámicamente el contenido en función de una condición dada. Cuando se integra con React Intlayer o Next Intlayer, el contenido apropiado se elige automáticamente de acuerdo con la condición proporcionada en tiempo de ejecución.

Configuración del contenido condicional

Para configurar contenido condicional en su proyecto Intlayer, cree un módulo de contenido que incluya sus 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, importe y use el hook useIntlayer del paquete react-intlayer. Este hook obtiene el contenido para la clave especificada y le permite pasar una condición para seleccionar la salida adecuada.

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 información más detallada sobre la configuración y el uso, consulte los siguientes recursos:

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

Estos recursos ofrecen más información sobre la configuración y uso de Intlayer en diversos entornos y marcos.