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.
var Parser = require('html-react-parser');
Parser('<p>Hello, world!</p>');
// same output as `React.createElement('p', {}, 'Hello, world!')`NPM:
$ npm install html-react-parserOr if you're using react <15.4:
$ npm install [email protected]CDN:
<!-- HTMLReactParser depends on React and ReactDOM -->
<script src="https://unpkg.com/react@latest/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@latest/dist/react-dom.min.js"></script>
<script src="https://unpkg.com/html-react-parser@latest/dist/html-react-parser.min.js"></script>See more examples.
Given that you have the following required:
// ES6
import Parser from 'html-react-parser';
import { render } from 'react-dom';You may render one element:
render(
Parser('<p>single</p>'),
document.getElementById('root')
);You may render adjacent 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 may 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')
);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>
`;
// parser config
const options = {
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, options),
document.getElementById('root')
);You will get the following:
<div>
<span style="font-size: 42px;">
<span class="prettify" style="color: hotpink;">
keep me and make me pretty!
</span>
</span>
</div>$ npm test
$ npm run lint