Repolode
Enviar
remarkablemark

remarkablemark/html-react-parser

Parser de HTML a React que convierte cadenas HTML en elementos de React tanto en Node.js como en el navegador.

Ver en GitHubSitio web
Estrellas
2,431
Forks
144
Issues abiertos
12
Último commit
ayer

¿Qué es?

html-react-parser convierte una cadena HTML en uno o varios elementos de React, de modo que el marcado de un CMS, una base de datos o una API se puede renderizar dentro de un componente de React sin usar dangerouslySetInnerHTML. Funciona tanto en el servidor (Node.js) como en el cliente (navegador), y también se puede cargar desde un CDN como bundle UMD.

La función parse acepta un objeto de opciones opcional. La opción replace permite sustituir nodos DOM específicos por elementos de React propios, con utilidades como domToReact y attributesToProps para gestionar los elementos secundarios y los atributos. La opción transform permite modificar cada elemento analizado, y la opción library permite usar Preact o una biblioteca de interfaz de usuario personalizada en lugar de React. Otras opciones incluyen trim para gestionar los espacios en blanco, los ajustes de htmlparser2 para el análisis en el servidor y trustedTypePolicy para Trusted Types en el navegador.

La biblioteca no sanitiza el HTML, así que por sí sola no es segura frente a XSS; si el contenido procede de fuentes no confiables, debe sanitizarse o protegerse con una Content Security Policy y Trusted Types.

Funciones clave

  • 01Convierte cadenas HTML en elementos de React que se pueden renderizar directamente en componentes.
  • 02Funciona tanto en Node.js para el renderizado del lado del servidor como en el navegador.
  • 03La opción replace sustituye los nodos DOM coincidentes por elementos de React personalizados.
  • 04La opción transform modifica cada elemento analizado después de la conversión.
  • 05Admite Preact o una biblioteca de interfaz de usuario personalizada mediante la opción library.
  • 06Incluye la opción trim y ajustes de htmlparser2 para controlar los espacios en blanco y el comportamiento del análisis.

Casos de uso

  • Renderizar contenido HTML de un CMS o de un flujo de procesamiento de Markdown dentro de una aplicación React.
  • Sustituir etiquetas incrustadas, como enlaces o imágenes, por componentes de React durante el renderizado.
  • Renderizar del lado del servidor fragmentos HTML en una aplicación React con Node.js.

Inicio rápido

  1. 1

    Instalar con npm

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

    Importar y analizar una cadena HTML

Antes de usarlo

  • No es seguro frente a XSS; el README indica que no sanea el HTML.
  • No sanea el HTML no válido.
  • Las opciones de htmlparser2 solo funcionan en el servidor (Node.js), no en el navegador.

Temas

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

Preguntas frecuentes

¿Qué es html-react-parser?
Parser de HTML a React que convierte cadenas HTML en elementos de React tanto en Node.js como en el navegador. html-react-parser convierte una cadena HTML en uno o varios elementos de React, de modo que el marcado de un CMS, una base de datos o una API se puede renderizar dentro de un componente de React sin usar dangerouslySetInnerHTML. Funciona tanto en el servidor (Node.js) como en el cliente (navegador), y también se puede cargar desde un CDN como bundle UMD.
¿html-react-parser es gratuito? ¿Qué licencia tiene?
html-react-parser es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿html-react-parser sigue mantenido?
Mantenimiento activo. El último commit de html-react-parser fue el 5 nov 2026.
¿Para qué puedo usar html-react-parser?
Renderizar contenido HTML de un CMS o de un flujo de procesamiento de Markdown dentro de una aplicación React. Sustituir etiquetas incrustadas, como enlaces o imágenes, por componentes de React durante el renderizado. Renderizar del lado del servidor fragmentos HTML en una aplicación React con Node.js.
¿Cómo se instala html-react-parser?
Instalar con npm: npm install html-react-parser --save Importar y analizar una cadena HTML
¿Dónde consigo html-react-parser?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/remarkablemark/html-react-parser

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados