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>
<script>
  window.HTMLReactParser(/* string */);
</script>

See 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 of using replace to modify 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>

Here's an example of using replace to exclude an element:

Parser('<p><br id="remove"></p>', {
  replace: ({ attribs }) => {
    if (attribs && attribs.id === 'remove') {
      return React.createElement(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

Special Thanks

License

MIT

feroz2ptg / html-react-parser Goto Github PK