\n\n \n \n O Svelte renderiza nós HTML como strings. Use `{@html}` para renderizá-los.\n\n ```svelte\n \n\n {@html $content.myHtmlContent}\n ```\n\n \n \n Preact suporta nós HTML diretamente no JSX.\n\n ```tsx fileName=\"App.tsx\"\n import { useIntlayer } from \"preact-intlayer\";\n\n const AppContent = () => {\n const { myHtmlContent } = useIntlayer(\"app\");\n return \n \n Solid suporta nós HTML diretamente no JSX.\n\n ```tsx fileName=\"App.tsx\"\n import { useIntlayer } from \"solid-intlayer\";\n\n const AppContent = () => {\n const { myHtmlContent } = useIntlayer(\"app\");\n return \n \n Angular utiliza a diretiva `[innerHTML]` para renderizar conteúdo HTML.\n\n ```typescript fileName=\"app.component.ts\"\n import { Component } from \"@angular/core\";\n import { useIntlayer } from \"angular-intlayer\";\n\n @Component({\n selector: \"app-root\",\n template: ``,\n })\n export class AppComponent {\n content = useIntlayer(\"app\");\n }\n ```\n\n Use o método `.use()` para fornecer componentes personalizados ou sobrescrever tags:\n\n ```typescript\n content().myHtmlContent.use({\n p: { class: \"prose\" },\n CustomLink: { href: \"/details\" },\n })\n ```\n\n \n\n\n## Configuração Global com `HTMLProvider`\n\nVocê pode configurar a renderização de HTML globalmente para toda a sua aplicação. Isso é ideal para definir componentes personalizados que devem estar disponíveis em todo o conteúdo HTML.\n\n\n \n \n ```tsx fileName=\"AppProvider.tsx\"\n import { HTMLProvider } from \"react-intlayer/html\";\n\n export const AppProvider = ({ children }) => (\n ,\n CustomLink: ({ children }) => {children},\n }}\n >\n {children}\n \n );\n ```\n\n Você também pode usar o seu próprio renderizador de HTML:\n\n ```tsx fileName=\"AppProvider.tsx\"\n import { HTMLProvider } from \"react-intlayer/html\";\n\n export const AppProvider = ({ children }) => (\n {\n const { renderHTML } = await import('react-intlayer/html');\n return renderHTML(html);\n }}\n >\n {children}\n \n );\n ```\n\n > Importar dinamicamente o seu renderizador de HTML é uma boa maneira de reduzir o tamanho do pacote da sua aplicação.\n\n \n \n \n ```typescript fileName=\"main.ts\"\n import { createApp, h } from \"vue\";\n import { intlayer } from \"vue-intlayer\";\n import { intlayerHTML } from \"vue-intlayer/html\";\n import App from \"./App.vue\";\n\n const app = createApp(App);\n\n app.use(intlayer);\n app.use(intlayerHTML, {\n components: {\n p: (props, { slots }) => h(\"p\", { class: \"prose\", ...props }, slots.default?.()),\n CustomLink: (props, { slots }) => h(\"a\", { href: \"/details\", ...props }, slots.default?.()),\n },\n });\n\n app.mount(\"#app\");\n ```\n\n Você também pode usar o seu próprio renderizador de HTML:\n\n ```typescript fileName=\"main.ts\"\n import { createApp, h } from \"vue\";\n import { intlayer } from \"vue-intlayer\";\n import { intlayerHTML } from \"vue-intlayer/html\";\n import App from \"./App.vue\";\n\n const app = createApp(App);\n\n app.use(intlayer);\n app.use(intlayerHTML, {\n renderHTML: async (html) => {\n const { renderHTML } = await import('vue-intlayer/html');\n return renderHTML(html);\n },\n });\n\n app.mount(\"#app\");\n ```\n\n > Importar dinamicamente o seu renderizador de HTML é uma boa maneira de reduzir o tamanho do pacote da sua aplicação.\n\n \n \n \n ```svelte fileName=\"App.svelte\"\n \n\n \n \n \n \n ```tsx fileName=\"AppProvider.tsx\"\n import { HTMLProvider } from \"preact-intlayer/html\";\n\n export const AppProvider = ({ children }) => (\n ,\n }}\n >\n {children}\n \n );\n ```\n\n Você também pode usar o seu próprio renderizador de HTML:\n\n ```tsx fileName=\"AppProvider.tsx\"\n import { HTMLProvider } from \"preact-intlayer/html\";\n\n export const AppProvider = ({ children }) => (\n {\n const { renderHTML } = await import('preact-intlayer/html');\n return renderHTML(html);\n }}\n >\n {children}\n \n );\n ```\n\n > Importar dinamicamente o seu renderizador de HTML é uma boa maneira de reduzir o tamanho do pacote da sua aplicação.\n\n \n \n \n ```tsx fileName=\"AppProvider.tsx\"\n import { HTMLProvider } from \"solid-intlayer/html\";\n\n export const AppProvider = (props) => (\n ,\n }}\n >\n {props.children}\n \n );\n ```\n\n Você também pode usar o seu próprio renderizador de HTML:\n\n ```tsx fileName=\"AppProvider.tsx\"\n import { HTMLProvider } from \"solid-intlayer/html\";\n\n export const AppProvider = (props) => (\n {\n const { renderHTML } = await import('solid-intlayer/html');\n return renderHTML(html);\n }}\n >\n {props.children}\n \n );\n ```\n\n > Importar dinamicamente o seu renderizador de HTML é uma boa maneira de reduzir o tamanho do pacote da sua aplicação.\n\n \n \n\n ```typescript fileName=\"app.config.ts\"\n import { createIntlayerHTMLProvider } from \"angular-intlayer/html\";\n\n export const appConfig: ApplicationConfig = {\n providers: [\n createIntlayerHTMLProvider({\n components: {\n p: { class: \"prose\" },\n CustomLink: { href: \"/details\" },\n },\n }),\n ],\n };\n ```\n\n Você também pode usar o seu próprio renderizador de HTML:\n\n ```typescript fileName=\"app.config.ts\"\n import { createIntlayerHTMLProvider } from \"angular-intlayer/html\";\n\n export const appConfig: ApplicationConfig = {\n providers: [\n createIntlayerHTMLProvider({\n renderMarkdown: async (html) => {\n const { renderMarkdown } = await import('angular-intlayer/html');\n return renderMarkdown(html);\n },\n }),\n ],\n };\n ```\n\n > Importar dinamicamente o seu renderizador de HTML é uma boa maneira de reduzir o tamanho do pacote da sua aplicação.\n\n \n \n\n---\n\n### Renderização Manual e Ferramentas Avançadas\n\nSe precisar renderizar strings HTML brutas ou tiver mais controlo sobre o mapeamento de componentes, use as seguintes ferramentas.\n\n\n \n #### Componente `\n {\" \n ```\n\n #### Hook `useHTMLRenderer()`\n\n Obtenha uma função de renderização pré-configurada.\n\n ```tsx\n import { useHTMLRenderer } from \"react-intlayer/html\";\n\n const renderHTML = useHTMLRenderer({\n components: { strong: (props) => }\n });\n\n return renderHTML(\" \n \n \n #### Componente `Hello World\" />\n \n ```\n\n \n \n \n #### Componente `Hello World\" />\n ```\n\n #### Hook `useHTMLRenderer()`\n\n ```svelte\n \n\n {@html render(\" \n \n \n #### Componente `\n {\" \n ```\n\n #### Hook `useHTMLRenderer()`\n\n ```tsx\n import { useHTMLRenderer } from \"preact-intlayer/html\";\n\n const render = useHTMLRenderer();\n\n return \n \n \n #### Componente `\n {\" \n ```\n\n #### Hook `useHTMLRenderer()`\n\n ```tsx\n import { useHTMLRenderer } from \"solid-intlayer/html\";\n\n const render = useHTMLRenderer();\n\n return \n \n #### Serviço `IntlayerHTMLService`\n Renderize uma string HTML utilizando o serviço.\n\n ```typescript\n import { IntlayerHTMLService } from \"angular-intlayer\";\n\n export class MyComponent {\n constructor(private markdownService: IntlayerHTMLService) {}\n\n renderHTML(html: string) {\n return this.markdownService.renderMarkdown(html);\n }\n }\n ```\n\n \n \n\n---\n\n## Referência de Opções\n\nEssas opções podem ser passadas para `HTMLProvider`, `HTMLRenderer`, `useHTMLRenderer` e `renderHTML`.\n\n| Opção | Tipo | Padrão | Descrição |\n| :----------- | :-------------------- | :----- | :------------------------------------------------------------------------------------------------------------------------------ |\n| `components` | `Record` | `{}` | Um mapa que associa tags HTML ou nomes de componentes personalizados aos componentes. |\n| `renderHTML` | `Function` | `null` | Uma função de renderização personalizada para substituir completamente o parser HTML padrão (Apenas para providers Vue/Svelte). |\n\n> Nota: Para React e Preact, as tags HTML padrão são fornecidas automaticamente. Você só precisa passar a prop `components` se quiser sobrescrevê-las ou adicionar componentes personalizados.\n","about":"Aprenda como declarar e usar conteúdo HTML com componentes personalizados no Intlayer. Siga esta documentação para incorporar conteúdo rico semelhante a HTML com substituição dinâmica de componentes no seu projeto internacionalizado.","url":"https://intlayer.org/pt/doc/concept/content/html","datePublished":"20-01-2026","dateModified":"24-03-2026","keywords":"HTML, Custom Components, Rich Content, Intlayer, Next.js, JavaScript, React, Vue, Svelte, Solid, Angular","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"Desenvolvedores, Gerentes de Conteúdo"}}O Nó
Renderização automática (usando
Configuração Global com
Componente
Hook
Utilitário
{myHtmlContent}
;\n };\n ```\n\n {myHtmlContent}
;\n };\n ```\n\n Hello World
\"}\nHello World
\");\n ```\n\n #### Utilitário `renderHTML()`\n\n Utilitário independente para renderização fora de componentes.\n\n ```tsx\n import { renderHTML } from \"react-intlayer/html\";\n\n const jsx = renderHTML(\"Hello
\", { components: { p: 'div' } });\n ```\n\nHello World
\")}\n ```\n\n #### Utilitário `renderHTML()`\n\n ```svelte\n \n\n {@html renderHTML(\"Hello World
\")}\n ```\n\nHello World
\"}\n{render(\"
;\n ```\n\n #### Utilitário `renderHTML()`\n\n ```tsx\n import { renderHTML } from \"preact-intlayer/html\";\n\n return Hello World
\")}{renderHTML(\"
;\n ```\n\n Hello World
\")}Hello World
\"}\n{render(\"
;\n ```\n\n #### Utilitário `renderHTML()`\n\n ```tsx\n import { renderHTML } from \"solid-intlayer/html\";\n\n return Hello World
\")}{renderHTML(\"
;\n ```\n\n Hello World
\")}Criação:2026-01-20Última atualização:2026-03-24
Referência esta documentação ao seu assistente AI favoritoChatGPTClaudeDeepSeekGoogle AI modeGeminiPerplexityMistralGrok
Faça sua pergunta e obtenha um resumo do documento referenciando esta página e o provedor AI de sua escolha
Histórico de versões
- "Add `intlayerHTML` plugin object; use `app.use(intlayerHTML)` instead of `app.use(installIntlayerHTML)`"v8.5.024/03/2026
- "mover a importação de {{framework}}-intlayer para {{framework}}-intlayer/html"v8.5.024/03/2026
- "Adicionar HTMLRenderer / useHTMLRenderer / utilitário renderHTML"v8.0.022/01/2026
- "Adicionar suporte ao parsing de HTML"v8.0.020/01/2026
O conteúdo desta página foi traduzido com uma IA.
Veja a última versão do conteúdo original em inglêsEditar esta documentação
Se você tiver uma ideia para melhorar esta documentação, sinta-se à vontade para contribuir enviando uma pull request no GitHub.
Link do GitHub para a documentaçãoCopiar
Copiar o Markdown do documento para a área de transferência
Conteúdo HTML / HTML no Intlayer
O Intlayer suporta conteúdo HTML, permitindo que você incorpore conteúdo rico e estruturado dentro dos seus dicionários. Esse conteúdo pode ser renderizado com tags HTML padrão ou substituído por componentes personalizados em tempo de execução.
Declarando Conteúdo HTML
Você pode declarar conteúdo HTML usando la função html ou simplesmente como uma string.
Use a função html para declarar explicitamente conteúdo HTML. Isso garante que as tags padrão sejam mapeadas corretamente mesmo se a detecção automática estiver desabilitada.
htmlDictionary.content.ts
Copiar código
Copiar o código para a área de transferência
import { html, type Dictionary } from "intlayer";const htmlDictionary = { key: "app", contentAutoTransformation: true, // pode ser definido no arquivo de configuração content: { myHtmlContent: html("<p>Hello <strong>World</strong></p>"), },} satisfies Dictionary;export default htmlDictionary;O Nó html()
A função html() é um novo recurso no Intlayer v8 que permite definir explicitamente conteúdo HTML em seus dicionários. Embora o Intlayer possa frequentemente detectar automaticamente o conteúdo HTML, o uso da função html() oferece várias vantagens:
- Segurança de Tipos: A função
html()permite definir as props esperadas para componentes personalizados, proporcionando melhor autocompletar e verificação de tipos em seu editor. - Declaração Explícita: Garante que uma string seja sempre tratada como HTML, mesmo que não contenha tags HTML padrão que acionariam a detecção automática.
- Definição de Componentes Personalizados: Você pode passar um segundo argumento para
html()para definir os componentes personalizados e seus tipos de props esperados.
typescript
Copiar código
Copiar o código para a área de transferência
import { html } from "intlayer";const myContent = html( "<MyCustomComponent title='Olá'>Mundo</MyCustomComponent>", { MyCustomComponent: { title: "string", children: "node", }, });Ao usar o método .use() em um nó HTML, os componentes que você fornecer serão verificados em relação à definição fornecida na função html() (se disponível).
Renderização de HTML
A renderização pode ser feita automaticamente pelo sistema de conteúdo do Intlayer ou manualmente usando ferramentas especializadas.
Renderização automática (usando useIntlayer)
Quando você acessa conteúdo via useIntlayer, os nós HTML já estão preparados para renderização.
Os nós HTML podem ser renderizados diretamente como JSX. As tags padrão funcionam automaticamente.
App.tsx
Copiar código
Copiar o código para a área de transferência
import { useIntlayer } from "react-intlayer";const AppContent = () => { const { myHtmlContent } = useIntlayer("app"); return <div>{myHtmlContent}</div>;};Use o método .use() para fornecer componentes personalizados ou sobrescrever tags:
tsx
Copiar código
Copiar o código para a área de transferência
{myHtmlContent.use({ p: (props) => <p className="prose" {...props} />, CustomLink: ({ children }) => <a href="/details">{children}</a>,})}Configuração Global com HTMLProvider
Você pode configurar a renderização de HTML globalmente para toda a sua aplicação. Isso é ideal para definir componentes personalizados que devem estar disponíveis em todo o conteúdo HTML.
AppProvider.tsx
Copiar código
Copiar o código para a área de transferência
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>);Você também pode usar o seu próprio renderizador de HTML:
AppProvider.tsx
Copiar código
Copiar o código para a área de transferência
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 dinamicamente o seu renderizador de HTML é uma boa maneira de reduzir o tamanho do pacote da sua aplicação.
Renderização Manual e Ferramentas Avançadas
Se precisar renderizar strings HTML brutas ou tiver mais controlo sobre o mapeamento de componentes, use as seguintes ferramentas.
Componente <HTMLRenderer />
Renderize uma string HTML con componentes específicos.
tsx
Copiar código
Copiar o código para a área de transferência
import { HTMLRenderer } from "react-intlayer/html";<HTMLRenderer components={{ p: MyCustomP }}> {"<p>Hello World</p>"}</HTMLRenderer>Hook useHTMLRenderer()
Obtenha uma função de renderização pré-configurada.
tsx
Copiar código
Copiar o código para a área de transferência
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>");Utilitário renderHTML()
Utilitário independente para renderização fora de componentes.
tsx
Copiar código
Copiar o código para a área de transferência
import { renderHTML } from "react-intlayer/html";const jsx = renderHTML("<p>Hello</p>", { components: { p: 'div' } });Referência de Opções
Essas opções podem ser passadas para HTMLProvider, HTMLRenderer, useHTMLRenderer e renderHTML.
Mostrar todo o conteúdo da tabela
Abrir a tabela em um modal para ver todo o conteúdo claramente
| Opção | Tipo | Padrão | Descrição |
|---|---|---|---|
components | Record<string, any> | {} | Um mapa que associa tags HTML ou nomes de componentes personalizados aos componentes. |
renderHTML | Function | null | Uma função de renderização personalizada para substituir completamente o parser HTML padrão (Apenas para providers Vue/Svelte). |
Nota: Para React e Preact, as tags HTML padrão são fornecidas automaticamente. Você só precisa passar a prop components se quiser sobrescrevê-las ou adicionar componentes personalizados.