Package Exports

html-react-parser
html-react-parser/lib/attributes-to-props
html-react-parser/lib/dom-to-react

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (html-react-parser) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

html-react-parser

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

HTMLReactParser(htmlString[, options])

It converts an HTML string to React elements.

There's also an option to replace elements with your own custom React elements.

Example

var Parser = require('html-react-parser');
Parser('<p>Hello, world!</p>');
// same output as `React.createElement('p', {}, 'Hello, world!')`

JSFiddle | repl.it

Installation

NPM:

npm install html-react-parser --save

Yarn:

yarn add html-react-parser

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>

More examples.

Usage

Given you have the following imported:

// ES Modules
import Parser from 'html-react-parser';
import { render } from 'react-dom';

Render a single element:

render(
  Parser('<h1>single</h1>'),
  document.getElementById('root')
);

Render multiple elements:

// with JSX
render(
  // the parser returns an array for adjacent elements
  // so make sure they're nested under a parent React element
  <div>{Parser('<p>brother</p><p>sister</p>')}</div>,
  document.getElementById('root')
);

// or without JSX
render(
  React.createElement('div', {}, Parser('<p>brother</p><p>sister</p>')),
  document.getElementById('root')
);

Render nested elements:

render(
  Parser('<ul><li>inside</li></ul>'),
  document.getElementById('root')
);

Renders with attributes preserved:

render(
  Parser('<p id="foo" class="bar baz" data-qux="42">look at me now</p>'),
  document.getElementById('root')
);

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.

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

Here's an example that replaces but keeps the children:

// with ES6 and JSX
import domToReact from 'html-react-parser/lib/dom-to-react';

const htmlString = `
  <p id="main">
    <span class="prettify">
      keep me and make me pretty!
    </span>
  </p>
`;

const parserOptions = {
  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 = Parser(htmlString, parserOptions);
ReactDOMServer.renderToStaticMarkup(reactElement);

Output:

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

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

Special Thanks

License

MIT