# html-react-parser
[](https://nodei.co/npm/html-react-parser/)
[](https://www.npmjs.com/package/html-react-parser)
[](https://travis-ci.org/remarkablemark/html-react-parser)
[](https://coveralls.io/github/remarkablemark/html-react-parser?branch=master)
[](https://david-dm.org/remarkablemark/html-react-parser)
[](https://www.npmjs.com/package/html-react-parser)
[](https://opencollective.com/html-react-parser)
HTML to React parser that works on both the server (Node.js) and the client (browser):
```
HTMLReactParser(string[, options])
```
It converts an HTML string to one or more [React elements](https://reactjs.org/docs/react-api.html#creating-react-elements). There's also an option to [replace an element](#replacedomnode) with your own.
#### Example:
```js
var parse = require('html-react-parser');
parse('text
'); // equivalent to `React.createElement('div', {}, 'text')`
```
[CodeSandbox](https://codesandbox.io/s/940pov1l4w) | [JSFiddle](https://jsfiddle.net/remarkablemark/7v86d800/) | [Repl.it](https://repl.it/@remarkablemark/html-react-parser) | [Examples](https://github.com/remarkablemark/html-react-parser/tree/master/examples)
## Installation
[NPM](https://www.npmjs.com/package/html-react-parser):
```sh
$ npm install html-react-parser --save
```
[Yarn](https://yarnpkg.com/package/html-react-parser):
```sh
$ yarn add html-react-parser
```
[CDN](https://unpkg.com/html-react-parser/):
```html
```
## Usage
Import the module:
```js
// CommonJS
const parse = require('html-react-parser');
// ES Modules
import parse from 'html-react-parser';
```
Parse single element:
```js
parse('single
');
```
Parse multiple elements:
```js
parse('Item 1Item 2');
```
Since adjacent elements are parsed as an array, make sure to render them under a parent node:
```jsx
{parse(`
- Item 1
- Item 2
`)}
```
Parse nested elements:
```js
parse('Lorem ipsum
');
```
Parse element with attributes:
```js
parse(
'
'
);
```
### Options
#### replace(domNode)
The `replace` callback allows you to swap an element with another React element.
The first argument is an object with the same output as [htmlparser2](https://github.com/fb55/htmlparser2)'s [domhandler](https://github.com/fb55/domhandler#example):
```js
parse('
', {
replace: function(domNode) {
console.dir(domNode, { depth: null });
}
});
```
Console output:
```js
{ type: 'tag',
name: 'br',
attribs: {},
children: [],
next: null,
prev: null,
parent: null }
```
The element is replaced only if a _valid_ React element is returned:
```js
parse('text
', {
replace: domNode => {
if (domNode.attribs && domNode.attribs.id === 'replace') {
return React.createElement('span', {}, 'replaced');
}
}
});
```
Here's an [example](https://repl.it/@remarkablemark/html-react-parser-replace-example) that modifies an element but keeps the children:
```jsx
import React from 'react';
import { renderToStaticMarkup } from 'react-dom/server';
import parse, { domToReact } from 'html-react-parser';
const html = `
keep me and make me pretty!
`;
const options = {
replace: ({ attribs, children }) => {
if (!attribs) return;
if (attribs.id === 'main') {
return {domToReact(children, options)}
;
}
if (attribs.class === 'prettify') {
return (
{domToReact(children, options)}
);
}
}
};
console.log(renderToStaticMarkup(parse(html, options)));
```
Output:
```html
keep me and make me pretty!
```
Here's an [example](https://repl.it/@remarkablemark/html-react-parser-56) that excludes an element:
```jsx
parse('
', {
replace: ({ attribs }) => attribs && attribs.id === 'remove' &&
});
```
### library
The `library` option allows you to specify which component library is used to create elements. React is used by default if this option is not specified.
Here's an example showing how to use Preact:
```js
parse('
', {
library: require('preact')
});
```
Or, using a custom library:
```js
parse('
', {
library: {
cloneElement: () => {
/* ... */
},
createElement: () => {
/* ... */
},
isValidElement: () => {
/* ... */
}
}
});
```
## FAQ
#### Is this library XSS safe?
No, this library is **_not_** [XSS (Cross-Site Scripting)](https://wikipedia.org/wiki/Cross-site_scripting) safe. See [#94](https://github.com/remarkablemark/html-react-parser/issues/94).
#### Does this library sanitize invalid HTML?
No, this library does **_not_** perform HTML sanitization. See [#124](https://github.com/remarkablemark/html-react-parser/issues/124).
#### Are `