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"
/>

Propriedades

Propriedade	Tipo	Descrição
html	string	Conteúdo HTML a ser renderizado
allowUnsafeIframe	boolean	Permite iframes (padrão: false)
className	string	Classes CSS adicionais
id	string	Identificador único do componente

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