Conteúdo Baseado em Gênero / Gênero no Intlayer

Como o Gênero Funciona

No Intlayer, o conteúdo baseado em gênero é realizado por meio da função gender, que mapeia valores específicos de gênero ('male', 'female') para seus conteúdos correspondentes. Essa abordagem permite selecionar dinamicamente o conteúdo com base em um gênero fornecido. Quando integrado com React Intlayer ou Next Intlayer, o conteúdo apropriado é automaticamente escolhido de acordo com o gênero fornecido em tempo de execução.

Configurando Conteúdo Baseado em Gênero

Para configurar conteúdo baseado em gênero em seu projeto Intlayer, crie um módulo de conteúdo que inclua suas definições específicas por gênero. Abaixo estão exemplos em vários formatos.

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

const myGenderContent = {
  key: "my_key",
  content: {
    myGender: gender({
      male: "meu conteúdo para usuários do sexo masculino",
      female: "meu conteúdo para usuários do sexo feminino",
      fallback: "meu conteúdo quando o gênero não é especificado", // Opcional
    }),
  },
} satisfies Dictionary;

export default myGenderContent;

Se nenhum fallback for declarado, a última chave declarada será usada como fallback caso o gênero não seja especificado ou não corresponda a nenhum gênero definido.

Usando Conteúdo Baseado em Gênero com React Intlayer

Para utilizar conteúdo baseado em gênero dentro de um componente React, importe e use o hook useIntlayer do pacote react-intlayer. Esse hook busca o conteúdo para a chave especificada e permite que você passe um gênero para selecionar a saída apropriada.

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

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

  return (
    <div>
      <p>
        {
          /* Saída: meu conteúdo para usuários do sexo masculino */
          myGender("male")
        }
      </p>
      <p>
        {
          /* Saída: meu conteúdo para usuárias */
          myGender("female")
        }
      </p>
      <p>
        {
          /* Saída: meu conteúdo para usuários */
          myGender("m")
        }
      </p>
      <p>
        {
          /* Saída: meu conteúdo para usuárias */
          myGender("f")
        }
      </p>
      <p>
        {
          /* Saída: meu conteúdo quando o gênero não é especificado */
          myGender("")
        }
      </p>
      <p>
        {
          /* Saída: meu conteúdo quando o gênero não é especificado */
          myGender(undefined)
        }
      </p>
    </div>
  );
};

export default GenderComponent;

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 oferecem mais informações sobre a configuração e o uso do Intlayer em vários ambientes e frameworks.