HTML Render

Apresentação

O componente HTMLRender é responsável por renderizar conteúdo HTML de forma segura, aplicando sanitização automática para prevenir ataques XSS (Cross-Site Scripting). Ele oferece uma forma controlada de exibir HTML dinâmico mantendo a segurança da aplicação.

Quando usar

• Para renderizar conteúdo HTML dinâmico
• Para exibir conteúdo de CMS
• Para mostrar templates HTML
• Para renderizar conteúdo de rich text editor
• Para exibir HTML de APIs externas
• Para mostrar conteúdo de newsletters
• Para renderizar templates de email
• Para exibir conteúdo de blog

Forma básica de uso

import { HTMLRender } from 'eitri-luminus';

// HTMLRender básico
<HTMLRender html="<h1>Título</h1><p>Parágrafo com <strong>texto</strong>.</p>" />

// HTMLRender com classes personalizadas
<HTMLRender 
  html="<div class='content'>Conteúdo HTML</div>"
  className="html-container"
/>

// HTMLRender com iframe permitido
<HTMLRender 
  html="<iframe src='https://example.com' width='100%' height='300'></iframe>"
  allowUnsafeIframe={true}
/>

// HTMLRender com id personalizado
<HTMLRender 
  html="<article><h2>Artigo</h2><p>Conteúdo do artigo...</p></article>"
  id="conteudo-dinamico"
/>

// HTMLRender com estilo inline
<HTMLRender 
  html="<div style='color: blue;'>Texto azul</div>"
  style={{
    padding: '20px',
    border: '1px solid #ccc'
  }}
/>

// HTMLRender para conteúdo de CMS
<HTMLRender 
  html={cmsContent}
  className="cms-content"
/>

// HTMLRender com HTML complexo
<HTMLRender 
  html={`
    <div class="card">
      <h3>Título do Card</h3>
      <p>Descrição detalhada com <a href="#">link</a>.</p>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
      </ul>
    </div>
  `}
/>

// HTMLRender para newsletter
<HTMLRender 
  html={newsletterHTML}
  className="newsletter-content"
  allowUnsafeIframe={false}
/>

// HTMLRender responsivo
<HTMLRender 
  html="<div class='responsive-content'>Conteúdo responsivo</div>"
  className="html-responsive"
/>

// HTMLRender com validação
<HTMLRender 
  html={validatedHTML}
  className="validated-content"
/>

// HTMLRender para template de email
<HTMLRender 
  html={emailTemplate}
  className="email-template"
/>

// HTMLRender com conteúdo de blog
<HTMLRender 
  html={blogPost}
  className="blog-content"
/>

// HTMLRender com HTML vazio
<HTMLRender html="" />
// Retorna null e exibe warning no console

// HTMLRender com HTML malicioso (será sanitizado)
<HTMLRender 
  html="<script>alert('malicioso')</script><p>Texto seguro</p>"
/>
// Apenas o <p> será renderizado, o script será removido

// HTMLRender para conteúdo de API
<HTMLRender 
  html={apiResponse.html}
  className="api-content"
/>

// HTMLRender com interação de conteúdo
<HTMLRender 
  html="<p>Clique <a href='https://example.com' target='_blank'>aqui</a> para mais informações.</p>"
  onContentInteraction={(interaction) => {
    console.log('Interação detectada:', interaction);
    
    if (interaction.href) {
      // Tratamento específico para links
      console.log('Link clicado:', interaction.href);
      // Pode abrir em nova aba, fazer navegação customizada, etc.
    } else {
      // Tratamento para outros elementos
      console.log('Elemento clicado:', interaction.element);
    }
  }}
/>

// HTMLRender com tratamento de links customizado
<HTMLRender 
  html="<div><a href='/internal' data-cy='internal-link'>Link Interno</a> <a href='https://external.com' target='_blank'>Link Externo</a></div>"
  onContentInteraction={(interaction) => {
    if (interaction.href) {
      if (interaction.href.startsWith('/')) {
        // Navegação interna
        router.push(interaction.href);
      } else {
        // Link externo - abrir em nova aba
        window.open(interaction.href, '_blank');
      }
    }
  }}
/>

// HTMLRender com analytics de interação
<HTMLRender 
  html={contentWithLinks}
  onContentInteraction={(interaction) => {
    // Enviar evento para analytics
    analytics.track('content_interaction', {
      element: interaction.element,
      href: interaction.href,
      text: interaction.text
    });
  }}
/>

Propriedades

Propriedade	Tipo	Descrição
html	string	Conteúdo HTML a ser renderizado
allowUnsafeIframe	boolean	Permite iframes (padrão: false)
onContentInteraction	(interaction: HTMLRenderInteraction) => void	Callback para interações com o conteúdo
className	string	Classes CSS adicionais
id	string	Identificador único do componente

HTMLRenderInteraction

Propriedade	Tipo	Descrição
element	string	Tag do elemento clicado
href	string	URL do link (apenas para <a>)
text	string	Texto do elemento
target	string	Target do link
rel	string	Rel do link
title	string	Título do elemento
type	string	Tipo do elemento
dataCy	string	Data-cy do elemento
id	string	ID do elemento

Heranças

O componente HTMLRender herda todas as propriedades comuns da biblioteca através da interface CommonProps, que inclui:

• Propriedades de estilo (margin, padding, etc)
• Propriedades de layout (flex, grid, etc)
• Propriedades de posicionamento
• Propriedades de acessibilidade
• Propriedades de identificação (id, data-e)

Observações

• O componente usa DOMPurify para sanitização automática
• Remove scripts e conteúdo malicioso automaticamente
• Suporta 115+ tags HTML permitidas
• É responsivo por padrão
• Pode ser estilizado com classes do Tailwind
• Suporta propriedades de layout flexíveis
• Mantém a acessibilidade por padrão
• Pode ser usado em qualquer contexto de layout
• Suporta diferentes tipos de conteúdo HTML
• Pode ser combinado com outros componentes
• Ideal para conteúdo dinâmico
• Suporta estilos inline e classes CSS
• Pode ser usado para diferentes tipos de conteúdo
• Funciona bem com CMS e APIs
• Facilita a renderização segura de HTML
• Suporta iframes de forma controlada
• Interface segura e confiável
• Previne ataques XSS automaticamente