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')`
Js

CodeSandbox | JSFiddle | repl.it

Installation

NPM:

$ npm install html-react-parser --save
Sh

Yarn:

$ yarn add html-react-parser
Sh

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>
HTML

Usage

Given you have html-react-parser imported:

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

Parse single element:

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

Parse multiple elements:

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

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>;
  }
}
React JSX

Parse nested elements:

parse('<ul><li>text</li></ul>');
Js

Parse element with attributes:

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

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');
    }
  }
});
Js

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));
React JSX

The output:

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

The following example uses replace to exclude an element:

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

Testing

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

Benchmarks

$ npm run test:benchmark
Sh

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
Sh

GitHub

remarkablemark/html-react-parser

??

— Read More

Download as zip