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

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.getElementedById('root')
);

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

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) {
        // example `domNode`:
        // {  type: 'tag',
        //    name: 'p',
        //    attribs: { id: 'main' },
        //    children: [],
        //    next: null,
        //    prev: null,
        //    parent: [Circular] }
        if (domNode.attribs && domNode.attribs.id === 'main') {
            // element is replaced only if a valid React element is returned
            return React.createElement('span', { style: { fontSize: '42px' } }, 'replaced!');
        }
    }
});

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