Contenido Basado en Género / Género en Intlayer

Cómo Funciona el Género

En Intlayer, el contenido basado en género se logra mediante la función gender, que asigna valores específicos de género ('male', 'female') a su contenido correspondiente. Este enfoque te permite seleccionar dinámicamente el contenido según un género dado. Cuando se integra con React Intlayer o Next Intlayer, el contenido apropiado se selecciona automáticamente según el género proporcionado en tiempo de ejecución.

Configuración de Contenido Basado en Género

Para configurar contenido basado en género en tu proyecto Intlayer, crea un módulo de contenido que incluya tus definiciones específicas por género. A continuación, se muestran ejemplos en varios formatos.

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

const myGenderContent = {
  key: "my_key",
  content: {
    myGender: gender({
      male: "mi contenido para usuarios masculinos",
      female: "mi contenido para usuarias femeninas",
      fallback: "mi contenido cuando el género no está especificado", // Opcional
    }),
  },
} satisfies Dictionary;

export default myGenderContent;

Si no se declara un valor de reserva (fallback), se tomará la última clave declarada como reserva si el género no está especificado o no coincide con ningún género definido.

Uso de contenido basado en género con React Intlayer

Para utilizar contenido basado en género 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 permite pasar un género para seleccionar la salida apropiada.

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

const GenderComponent: FC = () => {
  const { myGender } = useIntlayer("my_key");

  return (
    <div>
      <p>
        {
          /* Salida: mi contenido para usuarios masculinos */
          myGender("male")
        }
      </p>
      <p>
        {
          /* Salida: mi contenido para usuarios femeninos */
          myGender("female")
        }
      </p>
      <p>
        {
          /* Salida: mi contenido para usuarios masculinos */
          myGender("m")
        }
      </p>
      <p>
        {
          /* Salida: mi contenido para usuarios femeninos */
          myGender("f")
        }
      </p>
      <p>
        {
          /* Salida: mi contenido cuando el género no está especificado */
          myGender("")
        }
      </p>
      <p>
        {
          /* Salida: mi contenido cuando el género no está especificado */
          myGender(undefined)
        }
      </p>
    </div>
  );
};

export default GenderComponent;

Recursos Adicionales

Para obtener información más detallada sobre la configuración y el uso, consulte los siguientes recursos:

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

Estos recursos ofrecen una visión más profunda sobre la configuración y el uso de Intlayer en diversos entornos y frameworks.