HTML REACT PARSER

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

HTMLReactParser(string[, options])

The parser converts an HTML string to React element(s). If you want to replace an element with your own custom element, there’s an option to do that.

Example:

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

CodeSandbox | JSFiddle | repl.it

See usage and examples.

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, { domToReact } from 'html-react-parser';
const html = `
  <p id="main">
    <span class="prettify">
      keep me and make me pretty!
    </span>
  </p>
`;
const options = {
  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>
      );
    }
  }
};
const reactElement = parse(html, options);
console.log(renderToStaticMarkup(reactElement));

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 />
});

FAQ

Is this library XSS safe?

No, this library does not sanitize against XSS (Cross-Site Scripting). See #94.

Are <script> tags parsed?

Although <script> tags are parsed, react-dom does not render the contents. See #98.

My HTML attributes aren’t getting called.

That’s because inline event handlers like onclick are parsed as a string rather than a function. See #73.

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

Only collaborators with credentials can release and publish:

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

source: https://github.com/remarkablemark/html-react-parser