Package Exports

html-react-parser
html-react-parser/lib/attributes-to-props
html-react-parser/lib/dom-to-react
html-react-parser/lib/html-to-dom-server.js

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.

Parser(htmlString[, options])

The parser converts an HTML string to React element(s). You can also replace element(s) with your own custom React element(s) via the parser options.

Example

var Parser = require('html-react-parser');
var reactElement = (
    Parser('<p>Hello, world!</p>') // equivalent to `React.createElement('p', {}, 'Hello, world!')`
);
require('react-dom').render(reactElement, document.getElementById('root'));

Installation

$ npm install html-react-parser

Usage

Render to DOM:

var Parser = require('html-react-parser');
var ReactDOM = require('react-dom');

// single element
ReactDOM.render(
    Parser('<p>single</p>'),
    document.getElementById('root')
);

// adjacent elements
ReactDOM.render(
    // the parser returns an array for adjacent elements
    // so make sure they are nested under a parent React element
    React.createElement('div', {}, Parser('<p>one</p><p>two</p>'))
    document.getElementById('root')
);

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

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

Options

replace(domNode, key)

The replace method allows you to swap an element with your own React element.

The method has 2 parameters:

domNode: An object which shares the same schema as the output from htmlparser2.parseDOM.
key: A number to keep track of the element. You should set it as the "key" prop in case your element has siblings.

Parser('<p id="replace">text</p>', {
    replace: function(domNode, key) {
        console.log(domNode);
        // {  type: 'tag',
        //    name: 'p',
        //    attribs: { id: 'replace' },
        //    children: [],
        //    next: null,
        //    prev: null,
        //    parent: null }

        console.log(key); // 0

        return;
        // element is not replaced because
        // a valid React element is not returned
    }
});

Working example:

var Parser = require('html-react-parser');
var React = require('react');

var html = '<div><p id="main">replace me</p></div>';

var reactElement = Parser(html, {
    replace: function(domNode, key) {
        if (domNode.attribs && domNode.attribs.id === 'main') {
            return React.createElement('span', {
                key: key,
                style: { fontSize: '42px' } },
            'replaced!');
            // equivalent jsx syntax:
            // return <span key={key} style={{ fontSize: '42px' }}>replaced!</span>;
        }
    }
});

require('react-dom').render(reactElement, document.getElementById('root'));
// <div><span style="font-size: 42px;">replaced!</span></div>

Testing

$ npm test

Special Thanks

To benox3 and tdlm for their feedback and review.

License

MIT