Creation:2026-01-20Last update:2026-03-24

    Contenuto HTML / HTML in Intlayer

    Intlayer supporta contenuti HTML, permettendoti di incorporare contenuti ricchi e strutturati all'interno dei tuoi dizionari. Questi contenuti possono essere renderizzati con tag HTML standard o sostituiti con componenti personalizzati a runtime.

    Dichiarare contenuti HTML

    Puoi dichiarare contenuti HTML usando la funzione html o semplicemente come stringa.

    Usa la funzione html per dichiarare esplicitamente contenuti HTML. Questo garantisce che i tag standard siano mappati correttamente anche se il rilevamento automatico è disabilitato.

    htmlDictionary.content.ts
    import { html, type Dictionary } from "intlayer";const htmlDictionary = {  key: "app",  contentAutoTransformation: true, // può essere impostato nel file di configurazione  content: {    myHtmlContent:  html("<p>Ciao <strong>Mondo</strong></p>"),  },} satisfies Dictionary;export default htmlDictionary;

    Il nodo html()

    La funzione html() è una nuova funzionalità di Intlayer v8 che consente di definire esplicitamente il contenuto HTML nei dizionari. Sebbene Intlayer sia spesso in grado di rilevare automaticamente il contenuto HTML, l'uso della funzione html() offre diversi vantaggi:

    • Sicurezza dei tipi: La funzione html() consente di definire le prop attese per i componenti personalizzati, offrendo un migliore completamento automatico e controllo dei tipi nel proprio editor.
    • Dichiarazione esplicita: Garantisce che una stringa venga sempre trattata come HTML, anche se non contiene tag HTML standard che attiverebbero il rilevamento automatico.
    • Definizione di componenti personalizzati: È possibile passare un secondo argomento a html() per definire i componenti personalizzati e i tipi di prop attesi.
    typescript
    import { html } from "intlayer";const myContent = html(  "<MyCustomComponent title='Ciao'>Mondo</MyCustomComponent>",  {    MyCustomComponent: {      title: "string",      children: "node",    },  });

    Quando si utilizza il metodo .use() su un nodo HTML, i componenti forniti verranno controllati rispetto alla definizione fornita nella funzione html() (se disponibile).

    Rendering dell'HTML

    Il rendering può essere gestito automaticamente dal sistema di contenuti di Intlayer o manualmente utilizzando strumenti specializzati.

    Rendering automatico (usando useIntlayer)

    Quando accedi al contenuto tramite useIntlayer, i nodi HTML sono già pronti per il rendering.

    I nodi HTML possono essere renderizzati direttamente come JSX. I tag standard funzionano automaticamente.

    App.tsx
    import { useIntlayer } from "react-intlayer";const AppContent = () => {  const { myHtmlContent } = useIntlayer("app");  return <div>{myHtmlContent}</div>;};

    Usa il metodo .use() per fornire componenti personalizzati o sovrascrivere i tag:

    tsx
    {myHtmlContent.use({  p: (props) => <p className="prose" {...props} />,  CustomLink: ({ children }) => <a href="/details">{children}</a>,})}

    Configurazione globale con HTMLProvider

    Puoi configurare il rendering HTML a livello globale per l'intera applicazione. Questo è ideale per definire componenti personalizzati che dovrebbero essere disponibili in tutti i contenuti HTML.

    AppProvider.tsx
    import { HTMLProvider } from "react-intlayer/html";export const AppProvider = ({ children }) => (  <HTMLProvider    components={{      p: (props) => <p className="prose" {...props} />,      CustomLink: ({ children }) => <a href="/details">{children}</a>,    }}  >    {children}  </HTMLProvider>);

    Puoi anche utilizzare il tuo motore di rendering HTML:

    AppProvider.tsx
    import { HTMLProvider } from "react-intlayer/html";export const AppProvider = ({ children }) => (  <HTMLProvider    renderHTML={async (html) => {      const { renderHTML } = await import('react-intlayer/html');      return renderHTML(html);    }}  >    {children}  </HTMLProvider>);
    Importare dinamicamente il tuo renderer HTML è un ottimo modo per ridurre le dimensioni del bundle della tua applicazione.

    Rendering manuale e strumenti avanzati

    Se hai bisogno di renderizzare stringhe HTML grezze o di avere un controllo maggiore sulla mappatura dei componenti, usa i seguenti strumenti.

    Componente <HTMLRenderer />

    Esegui il rendering di una stringa HTML con componenti specifici.

    tsx
    import { HTMLRenderer } from "react-intlayer/html";<HTMLRenderer components={{ p: MyCustomP }}>  {"<p>Hello World</p>"}</HTMLRenderer>

    Hook useHTMLRenderer()

    Ottieni una funzione di rendering preconfigurata.

    tsx
    import { useHTMLRenderer } from "react-intlayer/html";const renderHTML = useHTMLRenderer({  components: { strong: (props) => <strong {...props} className="text-red-500" /> }});return renderHTML("<p>Hello <strong>World</strong></p>");

    Utility renderHTML()

    Utility standalone per il rendering al di fuori dei componenti.

    tsx
    import { renderHTML } from "react-intlayer/html";const jsx = renderHTML("<p>Hello</p>", { components: { p: 'div' } });

    Riferimento delle opzioni

    Queste opzioni possono essere passate a HTMLProvider, HTMLRenderer, useHTMLRenderer, e renderHTML.

    Opzione Tipo Predefinito Descrizione
    components Record<string, any> {} Una mappa che associa tag HTML o nomi di componenti personalizzati ai componenti.
    renderHTML Function null Una funzione di rendering personalizzata per sostituire completamente il parser HTML predefinito (solo per i provider Vue/Svelte).
    Nota: per React e Preact, i tag HTML standard sono forniti automaticamente. È necessario passare la prop components solo se si desidera sovrascriverli o aggiungere componenti personalizzati.
    Markdown
    Recupero funzione