Annidamento / Riferimento a Contenuti Annidati

Come Funziona l'Annidamento

In Intlayer, l'annidamento viene realizzato tramite la funzione nest, che consente di fare riferimento e riutilizzare contenuti da un altro dizionario. Invece di duplicare i contenuti, è possibile puntare a un modulo di contenuto esistente tramite la sua chiave.

Configurazione dell'Annidamento

Per configurare l'annidamento nel tuo progetto Intlayer, devi prima definire il contenuto base che desideri riutilizzare. Successivamente, in un modulo di contenuto separato, utilizzi la funzione nest per importare quel contenuto.

Dizionario Base

Di seguito è riportato un esempio di un dizionario base da annidare in un altro dizionario:

import { type Dictionary } from "intlayer";

const firstDictionary = {
  key: "key_of_my_first_dictionary",
  content: {
    content: "content",
    subContent: {
      contentNumber: 0,
      contentString: "string",
    },
  },
} satisfies Dictionary;

export default firstDictionary;

Riferimento con Annidamento

Ora, crea un altro modulo di contenuto che utilizza la funzione nest per fare riferimento al contenuto sopra. Puoi fare riferimento all'intero contenuto o a un valore specifico annidato:

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

const myNestingContent = {
  key: "key_of_my_second_dictionary",
  content: {
    // Riferisce all'intero dizionario:
    fullNestedContent: nest("key_of_my_first_dictionary"),
    // Riferisce a un valore specifico annidato:
    partialNestedContent: nest(
      "key_of_my_first_dictionary",
      "subContent.contentNumber"
    ),
  },
} satisfies Dictionary;

export default myNestingContent;

Come secondo parametro, puoi specificare un percorso verso un valore annidato all'interno di quel contenuto. Quando non viene fornito alcun percorso, viene restituito l'intero contenuto del dizionario di riferimento.

Utilizzo dell'Annidamento con React Intlayer

Per utilizzare contenuti annidati in un componente React, sfrutta il hook useIntlayer del pacchetto react-intlayer. Questo hook recupera il contenuto corretto in base alla chiave specificata. Ecco un esempio di come utilizzarlo:

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

const NestComponent: FC = () => {
  const { fullNestedContent, partialNestedContent } = useIntlayer(
    "key_of_my_second_dictionary"
  );

  return (
    <div>
      <p>
        Contenuto Annidato Completo: {JSON.stringify(fullNestedContent)}
        {/* Output: {"content": "content", "subContent": {"contentNumber": 0, "contentString": "string"}} */}
      </p>
      <p>
        Valore Annidato Parziale: {partialNestedContent}
        {/* Output: 0 */}
      </p>
    </div>
  );
};

export default NestComponent;

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 forniscono ulteriori approfondimenti sulla configurazione e sull'utilizzo di Intlayer in diversi ambienti e con vari framework.