A HTML to React parser Sample in 2020

A HTML to React parser Sample in 2020

tutorials -


An HTML to React parser that works on both the server and the browser:

HTMLReactParser(htmlString[, options])


var parse = require('html-react-parser');
parse('<div>text</div>'); // equivalent to `React.createElement('div', {}, 'text')`

CodeSandbox | JSFiddle | repl.it



$ npm install html-react-parser --save


$ yarn add html-react-parser

unpkg (CDN):

<!-- HTMLReactParser depends on React -->
<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/html-react-parser.min.js"></script>
  window.HTMLReactParser(/* string */);


Given you have html-react-parser imported:

// ES Modules
import parse from 'html-react-parser';

Parse single element:


Parse multiple elements:

parse('<p>sibling 1</p><p>sibling 2</p>');

Because the parser returns an array for adjacent elements, make sure it's nested under a parent element when rendered:

import React, { Component } from 'react';
import parse from 'html-react-parser';

class App extends Component {
  render() {
    return <div>{parse('<p>sibling 1</p><p>sibling 2</p>')}</div>;

Parse nested elements:


Parse element with attributes:

parse('<hr id="foo" class="bar" data-baz="qux">');



The replace method allows you to swap an element with your own React element.

The first argument is domNode―an object with the same output as htmlparser2's domhandler.

The element is replaced only if a valid React element is returned.

parse('<p id="replace">text</p>', {
  replace: function(domNode) {
    if (domNode.attribs && domNode.attribs.id === 'replace') {
      return React.createElement('span', {}, 'replaced');

The following example uses replace to modify the children:

import React from 'react';
import { renderToStaticMarkup } from 'react-dom/server';
import parse from 'html-react-parser';
import domToReact from 'html-react-parser/lib/dom-to-react';

const elements = parse(
  <p id="main">
    <span class="prettify">
      keep me and make me pretty!
    replace: ({ attribs, children }) => {
      if (!attribs) return;

      if (attribs.id === 'main') {
        return (
          <h1 style={{ fontSize: 42 }}>
            {domToReact(children, parserOptions)}
      } else if (attribs.class === 'prettify') {
        return (
          <span style={{ color: 'hotpink' }}>
            {domToReact(children, parserOptions)}


The output:

<h1 style="font-size:42px">
  <span style="color:hotpink">keep me and make me pretty!</span>

The following example uses replace to exclude an element:

parse('<p><br id="remove"></p>', {
  replace: ({ attribs }) =>
    attribs && attribs.id === 'remove' && <React.Fragment />


$ npm test
$ npm run lint # npm run lint:fix


$ npm run test:benchmark

Here's an example output of the benchmarks run on a MacBook Pro 2017:

html-to-react - Single x 415,186 ops/sec ±0.92% (85 runs sampled)
html-to-react - Multiple x 139,780 ops/sec ±2.32% (87 runs sampled)
html-to-react - Complex x 8,118 ops/sec ±2.99% (82 runs sampled)


$ npm run release
$ npm publish
$ git push --follow-tags


Trending On Tutorial Stuff

Our Sponsors

Top Applications in Tutorial Stuff

Top Experts In Tutorial Stuff