README.md

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)

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

The method has 1 parameter:

1. domNode: An object which shares the same schema as the output from htmlparser2.parseDOM.

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

        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) {
        if (domNode.attribs && domNode.attribs.id === 'main') {
            return React.createElement('span', {
                style: { fontSize: '42px' } },
            'replaced!');
            // equivalent jsx syntax:
            // return <span 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