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

    Contenido HTML / HTML en Intlayer

    Intlayer admite contenido HTML, lo que permite incrustar contenido enriquecido y estructurado dentro de los diccionarios. Este contenido se puede renderizar con etiquetas HTML estándar o reemplazarse por componentes personalizados en runtime.

    Declarar contenido HTML

    Puedes declarar contenido HTML mediante la función html o simplemente como una cadena de texto.

    Utiliza la función html para declarar explícitamente contenido HTML. Esto garantiza que las etiquetas estándar se mapeen correctamente incluso si la detección automática está desactivada.

    htmlDictionary.content.ts
    import { html, type Dictionary } from "intlayer";const htmlDictionary = {  key: "app",  contentAutoTransformation: true, // puede configurarse en el archivo de configuración  content: {    myHtmlContent:  html("<p>Hello <strong>World</strong></p>"),  },} satisfies Dictionary;export default htmlDictionary;

    El nodo html()

    La función html() es una nueva característica en Intlayer v8 que le permite definir explícitamente contenido HTML en sus diccionarios. Aunque Intlayer a menudo puede detectar automáticamente el contenido HTML, el uso de la función html() ofrece varias ventajas:

    • Seguridad de Tipos: La función html() le permite definir las props esperadas para los componentes personalizados, lo que proporciona un mejor autocompletado y comprobación de tipos en su editor.
    • Declaración Explícita: Garantiza que una cadena siempre se trate como HTML, incluso si no contiene etiquetas HTML estándar que activarían la detección automática.
    • Definición de Componentes Personalizados: Puede pasar un segundo argumento a html() para definir los componentes personalizados y sus tipos de props esperados.
    typescript
    import { html } from "intlayer";const myContent = html(  "<MyCustomComponent title='Hola'>Mundo</MyCustomComponent>",  {    MyCustomComponent: {      title: "string",      children: "node",    },  });

    Al utilizar el método .use() en un nodo HTML, los componentes que proporcione se cotejarán con la definición proporcionada en la función html() (si está disponible).

    Renderizado de HTML

    El renderizado puede ser gestionado automáticamente por el sistema de contenido de Intlayer o manualmente mediante herramientas especializadas.

    Renderizado Automático (usando useIntlayer)

    Cuando accedes al contenido a través de useIntlayer, los nodos HTML ya están preparados para el renderizado.

    Los nodos HTML se pueden renderizar directamente como JSX. Las etiquetas estándar funcionan automáticamente.

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

    Utiliza el método .use() para proporcionar componentes personalizados o sobrescribir etiquetas:

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

    Configuración Global con HTMLProvider

    Puedes configurar el renderizado de HTML de forma global para toda tu aplicación. Esto es ideal para definir componentes personalizados que deben estar disponibles en todo el contenido 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>);

    También puede utilizar su propio motor de renderizado 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>);
    Importar dinámicamente su renderizador de HTML es una buena manera de reducir el tamaño del bundle de su aplicación.

    Renderizado Manual y Herramientas Avanzadas

    Si necesitas renderizar cadenas de HTML sin procesar o tener más control sobre el mapeo de componentes, utiliza las siguientes herramientas.

    Componente <HTMLRenderer />

    Renderiza una cadena HTML con componentes específicos.

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

    Hook useHTMLRenderer()

    Obtén una función de renderizado preconfigurada.

    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>");

    Utilidad renderHTML()

    Utilidad independiente para renderizar fuera de los componentes.

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

    Referencia de Opciones

    Estas opciones se pueden pasar a HTMLProvider, HTMLRenderer, useHTMLRenderer y renderHTML.

    Opción Tipo Por Defecto Descripción
    components Record<string, any> {} Un mapa de etiquetas HTML o nombres de componentes personalizados a componentes.
    renderHTML Function null Una función de renderizado personalizada para reemplazar completamente el parser HTML predeterminado (Solo para proveedores de Vue/Svelte).
    Nota: Para React y Preact, las etiquetas HTML estándar se proporcionan automáticamente. Solo necesitas pasar la prop components si deseas sobrescribirlas o agregar componentes personalizados.
    Markdown
    Obtención de función