node package manager
Stop writing boring code. Discover, share, and reuse within your team. Create a free org »

html-react-parser

html-react-parser

NPM

NPM version Build Status Coverage Status Dependency status

An HTML to React parser:

Parser(htmlString[, options])

The parser converts an HTML string to React Element(s).

There is also an option to replace element(s) with your own React Element(s) via the parser options.

Example

var Parser = require('html-react-parser');
Parser('<p>Hello, world!</p>');
// same output as `React.createElement('p', {}, 'Hello, world!')`

JSFiddle

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>

See examples.

Usage

Given that you have the following imported:

// ES Modules
import Parser from 'html-react-parser';
import { render } from 'react-dom';

You can render an element:

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

You can render multiple elements:

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

You can render nested elements:

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

The parser will also preserve attributes:

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 that has the same output as htmlparser2.parseDOM.

The element is only replaced if a valid React Element is returned.

// with JSX
Parser('<p id="replace">text</p>', {
    replace: function(domNode) {
        if (domNode.attribs && domNode.attribs.id === 'replace') {
            return <span>replaced</span>;
        }
    }
});

Advanced example (keep the replaced children):

// with ES6 and JSX
 
// converts DOM object to React Elements
import domToReact from 'html-react-parser/lib/dom-to-react';
 
const html = `
    <div>
        <p id="main">
            <span class="prettify">
                keep me and make me pretty!
            </span>
        </p>
    </div>
`;
 
const parserOptions = {
    replace: (domNode) => {
        // do not replace if element has no attributes
        if (!domNode.attribs) return;
 
        if (domNode.attribs.id === 'main') {
            return (
                <span style={{ fontSize: '42px' }}>
                    {domToReact(domNode.children, options)}
                </span>
            );
 
        } else if (domNode.attribs.class === 'prettify') {
            return (
                <span style={{ color: 'hotpink' }}>
                    {domToReact(domNode.children, options)}
                </span>
            );
        }
    }
};
 
render(
    Parser(html, parserOptions),
    document.getElementById('root')
);

It will output the following:

<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

License

MIT