Contenuto Condizionale / Condizione in Intlayer

Come Funziona la Condizione

In Intlayer, il contenuto condizionale viene realizzato tramite la funzione cond, che mappa condizioni specifiche (tipicamente valori booleani) al loro contenuto corrispondente. Questo approccio consente di selezionare dinamicamente il contenuto in base a una determinata condizione. Quando integrato con React Intlayer o Next Intlayer, il contenuto appropriato viene automaticamente scelto in base alla condizione fornita in fase di esecuzione.

Configurazione del Contenuto Condizionale

Per configurare il contenuto condizionale nel tuo progetto Intlayer, crea un modulo di contenuto che includa le tue definizioni condizionali. Di seguito sono riportati esempi in vari formati.

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

const myConditionalContent = {
  key: "my_key",
  content: {
    myCondition: cond({
      true: "il mio contenuto quando è vero",
      false: "il mio contenuto quando è falso",
      fallback: "il mio contenuto quando la condizione fallisce", // Opzionale
    }),
  },
} satisfies Dictionary;

export default myConditionalContent;

Se non viene dichiarato alcun fallback, l'ultima chiave dichiarata sarà presa come fallback se la condizione non viene validata.

Utilizzo del Contenuto Condizionale con React Intlayer

Per utilizzare il contenuto condizionale all'interno di un componente React, importa e utilizza il hook useIntlayer dal pacchetto react-intlayer. Questo hook recupera il contenuto per la chiave specificata e consente di passare una condizione per selezionare l'output appropriato.

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

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

  return (
    <div>
      <p>
        {
          /* Output: il mio contenuto quando è vero */
          myCondition(true)
        }
      </p>
      <p>
        {
          /* Output: il mio contenuto quando è falso */
          myCondition(false)
        }
      </p>
      <p>
        {
          /* Output: il mio contenuto quando la condizione fallisce */
          myCondition("")
        }
      </p>
      <p>
        {
          /* Output: il mio contenuto quando la condizione fallisce */
          myCondition(undefined)
        }
      </p>
    </div>
  );
};

export default ConditionalComponent;

Risorse Aggiuntive

Per informazioni più dettagliate sulla configurazione e sull'utilizzo, consulta le seguenti risorse:

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

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