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.

**/*.content.ts

Copiare il codice

Copiare il codice nella clipboard

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

To utilize conditional content within a React component, import and use the useIntlayer hook from the react-intlayer package. This hook fetches the content for the specified key and allows you to pass in a condition to select the appropriate output.

**/*.tsx

Copiare il codice

Copiare il codice nella clipboard

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

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

return (
  <div>
    <p>
      {
        /* Output: my content when it's true */
        myCondition(true)
      }
    </p>
    <p>
      {
        /* Output: my content when it's false */
        myCondition(false)
      }
    </p>
    <p>
      {
        /* Output: my content when the condition fails */
        myCondition("")
      }
    </p>
    <p>
      {
        /* Output: my content when the condition fails */
        myCondition(undefined)
      }
    </p>
  </div>
);
};

export default ConditionalComponent;

To utilize conditional content in Next.js Client Components, retrieve it via the useIntlayer hook. Here's an example:

**/*.tsx

Copiare il codice

Copiare il codice nella clipboard

"use client";

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

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

return (
  <div>
    <p>{myCondition(true)}</p>
    <p>{myCondition(false)}</p>
  </div>
);
};

export default ConditionalComponent;

To utilize conditional content in Vue components, retrieve it via the useIntlayer hook. Here's an example:

**/*.vue

Copiare il codice

Copiare il codice nella clipboard

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";const { myCondition } = useIntlayer("my_key");</script><template><div>  <p>{{ myCondition(true) }}</p>  <p>{{ myCondition(false) }}</p></div></template>

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";const { myCondition } = useIntlayer("my_key");</script><template><div>  <p>{{ myCondition(true) }}</p>  <p>{{ myCondition(false) }}</p></div></template>

To utilize conditional content in Svelte components, retrieve it via the useIntlayer hook. The store is accessed with $. Here's an example:

**/*.svelte

Copiare il codice

Copiare il codice nella clipboard

<script lang="ts">import { useIntlayer } from "svelte-intlayer";const content = useIntlayer("my_key");</script><div><p>{$content.myCondition(true)}</p><p>{$content.myCondition(false)}</p></div>

<script lang="ts">import { useIntlayer } from "svelte-intlayer";const content = useIntlayer("my_key");</script><div><p>{$content.myCondition(true)}</p><p>{$content.myCondition(false)}</p></div>

To utilize conditional content in Preact components, retrieve it via the useIntlayer hook. Here's an example:

**/*.tsx

Copiare il codice

Copiare il codice nella clipboard

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

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

return (
  <div>
    <p>{myCondition(true)}</p>
    <p>{myCondition(false)}</p>
  </div>
);
};

export default ConditionalComponent;

To utilize conditional content in SolidJS components, retrieve it via the useIntlayer hook. Here's an example:

**/*.tsx

Copiare il codice

Copiare il codice nella clipboard

import type { Component } from "solid-js";
import { useIntlayer } from "solid-intlayer";

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

return (
  <div>
    <p>{myCondition(true)}</p>
    <p>{myCondition(false)}</p>
  </div>
);
};

export default ConditionalComponent;

To utilize conditional content in Angular components, retrieve it via the useIntlayer hook. Here's an example:

app.component.ts

Copiare il codice

Copiare il codice nella clipboard

import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({selector: "app-conditional",template: `  <div>    <p>{{ content().myCondition(true) }}</p>    <p>{{ content().myCondition(false) }}</p>  </div>`,})export class ConditionalComponent {content = useIntlayer("my_key");}

import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({selector: "app-conditional",template: `  <div>    <p>{{ content().myCondition(true) }}</p>    <p>{{ content().myCondition(false) }}</p>  </div>`,})export class ConditionalComponent {content = useIntlayer("my_key");}

To utilize conditional content with vanilla-intlayer, retrieve it via the useIntlayer hook. Here's an example:

**/*.ts

Copiare il codice

Copiare il codice nella clipboard

import { installIntlayer, useIntlayer } from "vanilla-intlayer";

installIntlayer();

const content = useIntlayer("my_key").onChange((newContent) => {
document.getElementById("true-content")!.textContent =
  newContent.myCondition(true);
document.getElementById("false-content")!.textContent =
  newContent.myCondition(false);
});

// Initial render
document.getElementById("true-content")!.textContent =
content.myCondition(true);
document.getElementById("false-content")!.textContent =
content.myCondition(false);

Risorse Aggiuntive

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

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

Enumerazione

Genere