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>') // same as `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 first argument is domNode, which is 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
    }
});

Simple example:

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

var html = (
    '<div>' +
        '<p id="replace">'
            'replace me' +
        '</p>' +
    '</div>'
);

var reactElement = Parser(html, {
    replace: function(domNode) {
        if (domNode.attribs && domNode.attribs.id === 'replace') {
            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>

Advanced example (the replaced element's children are kept):

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

// used for recursively parsing DOM created from the HTML
var domToReact = require('html-react-parser/lib/dom-to-react');

var html = (
    '<div>' +
        '<p id="main">' +
            '<span class="prettify">' +
                'keep me and make me pretty!' +
            '</span>' +
        '</p>' +
    '</div>'
);

var parserConfig = {
    replace: function(domNode) {
        var parsedChildren;
        if (domNode.attribs) {
            if (domNode.attribs.id === 'main') {
                // continue parsing domNode's children with same config
                parsedChildren = domToReact(domNode.children, parserConfig);
                return React.createElement('span', {
                    style: { fontSize: '42px' }
                }, parsedChildren);
                // equivalent jsx syntax:
                // return <span style={{ fontSize: '42px' }}>{parsedChildren}</span>;

            } else if (domNode.attribs.class === 'prettify') {
                // continue parsing domNode's children with same config
                parsedChildren = domToReact(domNode.children, parserConfig);
                return React.createElement('span', {
                    style: { color: 'hotpink' }
                }, parsedChildren);
                // equivalent jsx syntax:
                // return <span style={{ color: 'hotpink' }}>{parsedChildren}</span>;
            }
        }
    }
};

require('react-dom').render(
    Parser(html, parserConfig),
    document.getElementById('root')
);
// <div>
//     <span style="font-size: 42px;">
//         <span class="prettify" style="color: hotpink;">
//             keep me and make me pretty!
//         </span>
//     </span>
// </div>

Testing

$ npm test
$ npm run lint

Special Thanks

To htmlparser2.
To all the contributors.
To benox3 and tdlm for their feedback and review.

License

MIT