A HTML to React parser

html-react-parser

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

HTMLReactParser(htmlString[, options])

Example:

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

CodeSandbox | JSFiddle | repl.it

Installation

NPM:

$ npm install html-react-parser --save

Yarn:

$ yarn add html-react-parser

unpkg (CDN):

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

Usage

Given you have html-react-parser imported:

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

Parse single element:

parse('<h1>single</h1>');

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('<ul><li>text</li></ul>');

Parse element with attributes:

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

Options

replace(domNode)

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!
    </span>
  </p>
`,
  {
    replace: ({ attribs, children }) => {
      if (!attribs) return;

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

console.log(renderToStaticMarkup(elements));

The output:

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

The following example uses replace to exclude an element:

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

Testing

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

Benchmarks

$ 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)

Release

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

GitHub