Repolode
Enviar
remarkablemark

remarkablemark/html-react-parser

Parser de HTML para React que converte strings HTML em elementos React no Node.js e no navegador.

Ver no GitHubSite
Estrelas
2,431
Forks
144
Issues abertas
12
Último commit
anteontem

O que é?

html-react-parser transforma uma string HTML em um ou mais elementos React, permitindo renderizar marcação de um CMS, banco de dados ou API dentro de um componente React sem usar dangerouslySetInnerHTML. Funciona tanto no servidor (Node.js) quanto no cliente (navegador) e também pode ser carregado de uma CDN como um bundle UMD.

A função parse aceita um objeto options opcional. A opção replace permite substituir nós DOM específicos pelos seus próprios elementos React, com helpers como domToReact e attributesToProps para lidar com filhos e atributos. A opção transform permite modificar cada elemento analisado, e a opção library permite usar Preact ou uma biblioteca de UI personalizada no lugar do React. Outras opções incluem trim, para lidar com espaços em branco; configurações de htmlparser2 para análise no servidor; e trustedTypePolicy para Trusted Types no navegador.

A biblioteca não sanitiza HTML e, por isso, não é segura contra XSS por si só; quando a entrada vier de fontes não confiáveis, ela deve ser sanitizada ou protegida com uma Content Security Policy e Trusted Types.

Recursos principais

  • 01Converte strings HTML em elementos React que podem ser renderizados diretamente em componentes.
  • 02Funciona no Node.js para renderização no servidor e também no navegador.
  • 03A opção replace substitui nós DOM correspondentes por elementos React personalizados.
  • 04A opção transform modifica cada elemento analisado após a conversão.
  • 05Oferece suporte a Preact ou a uma biblioteca de UI personalizada por meio da opção library.
  • 06Inclui a opção trim e configurações de htmlparser2 para controlar espaços em branco e o comportamento da análise.

Casos de uso

  • Renderizar conteúdo HTML de um CMS ou pipeline de Markdown dentro de um app React.
  • Substituir tags incorporadas, como links ou imagens, por componentes React durante a renderização.
  • Renderizar fragmentos HTML no servidor em uma aplicação React com Node.js.

Início rápido

  1. 1

    Instalar via npm

    npm install html-react-parser --save
  2. 2

    Importar e analisar uma string HTML

Antes de usar

  • Não é seguro contra XSS; o README informa que o HTML não é sanitizado.
  • Não sanitiza HTML inválido.
  • As opções de htmlparser2 só funcionam no servidor (Node.js), não no navegador.

Tópicos

#react#html#parser#javascript#typescript#jsx#dom#html-react-parser#library#npm

Perguntas frequentes

O que é html-react-parser?
Parser de HTML para React que converte strings HTML em elementos React no Node.js e no navegador. html-react-parser transforma uma string HTML em um ou mais elementos React, permitindo renderizar marcação de um CMS, banco de dados ou API dentro de um componente React sem usar dangerouslySetInnerHTML. Funciona tanto no servidor (Node.js) quanto no cliente (navegador) e também pode ser carregado de uma CDN como um bundle UMD.
html-react-parser é gratuito? Qual é a licença?
html-react-parser é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
html-react-parser ainda é mantido?
Manutenção ativa. O último commit de html-react-parser foi em 6 de nov. de 2026.
Para que posso usar html-react-parser?
Renderizar conteúdo HTML de um CMS ou pipeline de Markdown dentro de um app React. Substituir tags incorporadas, como links ou imagens, por componentes React durante a renderização. Renderizar fragmentos HTML no servidor em uma aplicação React com Node.js.
Como instalar html-react-parser?
Instalar via npm: npm install html-react-parser --save Importar e analisar uma string HTML
Onde consigo html-react-parser?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/remarkablemark/html-react-parser

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados