Contenuto Basato sul Genere / Genere in Intlayer

Come Funziona il Genere

In Intlayer, il contenuto basato sul genere viene realizzato tramite la funzione gender, che associa valori di genere specifici ('male', 'female') ai contenuti corrispondenti. Questo approccio consente di selezionare dinamicamente il contenuto in base a un genere dato. Quando integrato con React Intlayer o Next Intlayer, il contenuto appropriato viene scelto automaticamente in base al genere fornito a runtime.

Configurare il Contenuto Basato sul Genere

Per configurare contenuti basati sul genere nel tuo progetto Intlayer, crea un modulo di contenuto che includa le tue definizioni specifiche per genere. Di seguito sono riportati esempi in vari formati.

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

const myGenderContent = {
  key: "my_key",
  content: {
    myGender: gender({
      male: "il mio contenuto per utenti maschi",
      female: "il mio contenuto per utenti femmine",
      fallback: "il mio contenuto quando il genere non è specificato", // Opzionale
    }),
  },
} satisfies Dictionary;

export default myGenderContent;

Se non viene dichiarato un fallback, l'ultima chiave dichiarata verrà utilizzata come fallback se il genere non è specificato o non corrisponde a nessun genere definito.

Utilizzo del Contenuto Basato sul Genere con React Intlayer

Per utilizzare contenuti basati sul genere all'interno di un componente React, importa e usa l'hook useIntlayer dal pacchetto react-intlayer. Questo hook recupera il contenuto per la chiave specificata e ti permette di passare un genere per selezionare l'output appropriato.

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

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

  return (
    <div>
      <p>
        {
          /* Output: il mio contenuto per utenti maschi */
          myGender("male")
        }
      </p>
      <p>
        {
          /* Output: il mio contenuto per utenti di genere femminile */
          myGender("female")
        }
      </p>
      <p>
        {
          /* Output: il mio contenuto per utenti di genere maschile */
          myGender("m")
        }
      </p>
      <p>
        {
          /* Output: il mio contenuto per utenti di genere femminile */
          myGender("f")
        }
      </p>
      <p>
        {
          /* Output: il mio contenuto quando il genere non è specificato */
          myGender("")
        }
      </p>
      <p>
        {
          /* Output: il mio contenuto quando il genere non è specificato */
          myGender(undefined)
        }
      </p>
    </div>
  );
};

export default GenderComponent;

Risorse Aggiuntive

Per informazioni più dettagliate sulla configurazione e l'uso, consulta le seguenti risorse:

• Documentazione Intlayer CLI
• Documentazione React Intlayer
• Documentazione Next Intlayer

Queste risorse offrono ulteriori approfondimenti sulla configurazione e l'uso di Intlayer in diversi ambienti e framework.