Research
Security News
Malicious npm Package Targets Solana Developers and Hijacks Funds
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
By Socket Research Team - Dec 02, 2024
Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
html-react-parser
Advanced tools
What is html-react-parser?
The html-react-parser package is designed to convert HTML strings into React components. This is particularly useful when you need to dynamically render HTML content in a React application, such as content fetched from a CMS or API that returns HTML. It allows for custom handling of elements, attributes, and can work with server-side rendering.
What are html-react-parser's main functionalities?
Parsing HTML strings to React Elements
This feature allows you to convert a string of HTML into React elements that can be rendered inside a React component.
import parse from 'html-react-parser';
const html = '<div>Hello World</div>';
const reactElement = parse(html);Replacing or modifying elements during parsing
This feature allows you to define a 'replace' function in the options object that can modify or replace elements during the parsing process.
import parse, { domToReact } from 'html-react-parser';
const html = '<p id="replace">Replace me</p>';
const options = {
replace: ({ attribs, children }) => {
if (attribs && attribs.id === 'replace') {
return <span>{domToReact(children)}</span>;
}
}
};
const reactElement = parse(html, options);Preserving custom attributes and event handlers
This feature allows you to preserve custom attributes and potentially event handlers when parsing HTML to React elements.
import parse from 'html-react-parser';
const html = '<div onclick="handleClick()">Click me</div>';
const reactElement = parse(html, {
preserveAttributes: ['onclick']
});Other packages similar to html-react-parser
react-html-parser
react-html-parser is similar to html-react-parser in that it converts HTML strings into React components. However, it may differ in the specifics of its API and the options it provides for customization during the parsing process.
dangerously-set-html-content
dangerously-set-html-content provides a component that can be used to set raw HTML content. It is similar to using the dangerouslySetInnerHTML prop in React but encapsulated in a component for easier use. It does not offer the same level of customization or parsing capabilities as html-react-parser.
sanitize-html-react
sanitize-html-react is designed to sanitize HTML strings before they are rendered to prevent XSS attacks. It can be used in conjunction with html-react-parser to first sanitize the HTML string and then parse it into React components. It focuses more on security rather than parsing.
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. There's also an option to replace an element with your own.
Example:
var parse = require('html-react-parser');
parse('<div>text</div>'); // equivalent to `React.createElement('div', {}, 'text')`
CodeSandbox | JSFiddle | Repl.it | Examples
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>
<script>
window.HTMLReactParser(/* string */);
</script>
Usage
Import the module:
// ES Modules
import parse from 'html-react-parser';
// CommonJS
const parse = require('html-react-parser');
Parse single element:
parse('<h1>single</h1>');
Parse multiple elements:
parse('<li>Item 1</li><li>Item 2</li>');
Since adjacent elements are parsed as an array, make sure to render them under a parent node:
<ul>
{parse(`
<li>Item 1</li>
<li>Item 2</li>
`)}
</ul>
Parse nested elements:
parse('<body><p>Lorem ipsum</p></body>');
Parse element with attributes:
parse(
'<hr id="foo" class="bar" data-attr="baz" custom="qux" style="top:42px;">'
);
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's domhandler:
parse('<br>', {
replace: function (domNode) {
console.dir(domNode, { depth: null });
}
});
Console output:
{ type: 'tag',
name: 'br',
attribs: {},
children: [],
next: null,
prev: null,
parent: null }
The element is replaced only if a valid React element is returned:
parse('<p id="replace">text</p>', {
replace: domNode => {
if (domNode.attribs && domNode.attribs.id === 'replace') {
return React.createElement('span', {}, 'replaced');
}
}
});
Here's an example that modifies an element but keeps the children:
import React from 'react';
import { renderToStaticMarkup } from 'react-dom/server';
import parse, { domToReact } from 'html-react-parser';
const html = `
<p id="main">
<span class="prettify">
keep me and make me pretty!
</span>
</p>
`;
const options = {
replace: ({ attribs, children }) => {
if (!attribs) return;
if (attribs.id === 'main') {
return <h1 style={{ fontSize: 42 }}>{domToReact(children, options)}</h1>;
}
if (attribs.class === 'prettify') {
return (
<span style={{ color: 'hotpink' }}>
{domToReact(children, options)}
</span>
);
}
}
};
console.log(renderToStaticMarkup(parse(html, options)));
Use the exported attributesToProps method to convert DOM attributes to React Props:
import React from 'react';
import parse, { attributesToProps } from 'html-react-parser';
const html = `
<hr class="prettify" style="background:#fff;text-align:center" />
`;
const options = {
replace: node => {
if (node.attribs && node.name === 'hr') {
const props = attributesToProps(node.attribs);
return <hr {...props} />;
}
}
};
Output:
<h1 style="font-size:42px">
<span style="color:hotpink"> keep me and make me pretty! </span>
</h1>
Here's an example that excludes an element:
parse('<p><br id="remove"></p>', {
replace: ({ attribs }) => attribs && attribs.id === 'remove' && <Fragment />
});
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:
parse('<br>', {
library: require('preact')
});
Or, using a custom library:
parse('<br>', {
library: {
cloneElement: () => {
/* ... */
},
createElement: () => {
/* ... */
},
isValidElement: () => {
/* ... */
}
}
});
htmlparser2
The default options passed to htmlparser2 are:
{
decodeEntities: true,
lowerCaseAttributeNames: false
}
Since v0.12.0, you can override the default options by passing htmlparser2 options.
Here's an example in which decodeEntities and xmlMode are enabled:
parse('<p /><p />', {
htmlparser2: {
decodeEntities: true,
xmlMode: true
}
});
Warning:
htmlparser2is only applicable on the server-side (Node.js) and not applicable on the client-side (browser). By overridinghtmlparser2options, there's a chance that universal rendering breaks. Do this at your own risk.
trim
Normally, whitespace is preserved:
parse('<br>\n'); // [React.createElement('br'), '\n']
By enabling the trim option, whitespace text nodes will be skipped:
parse('<br>\n', { trim: true }); // React.createElement('br')
This addresses the warning:
Warning: validateDOMNesting(...): Whitespace text nodes cannot appear as a child of <table>. Make sure you don't have any extra whitespace between tags on each line of your source code.
However, this option may strip out intentional whitespace:
parse('<p> </p>', { trim: true }); // React.createElement('p')
FAQ
Is this library XSS safe?
No, this library is not XSS (cross-site scripting) safe. See #94.
Does this library sanitize invalid HTML?
No, this library does not perform HTML sanitization. See #124, #125, and #141.
Are <script> tags parsed?
Although <script> tags and their contents are rendered on the server-side, they're not evaluated on the client-side. See #98.
Why aren't my HTML attributes getting called?
This is because inline event handlers like onclick are parsed as a string instead of a function. See #73.
The parser throws an error.
Check if your arguments are valid. Also, see "Does this library sanitize invalid HTML?".
Does this library support SSR?
Yes, this library supports server-side rendering on Node.js. See demo.
Why are my elements nested incorrectly?
Make sure your HTML markup is valid. The HTML to DOM parsing will be affected if you're using self-closing syntax (/>) on non-void elements:
parse('<div /><div />'); // returns single element instead of array of elements
See #158.
I get "Warning: validateDOMNesting(...): Whitespace text nodes cannot appear as a child of table."
Enable the trim option. See #155.
Don't change case of tags.
Tags are lowercased by default. To prevent that from happening, pass the htmlparser2 option:
const options = {
htmlparser2: {
lowerCaseTags: false
}
};
parse('<CustomElement>', options); // React.createElement('CustomElement')
Warning: By preserving case-sensitivity of the tags, you may get rendering warnings like:
Warning: <CustomElement> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
Benchmarks
$ npm run test:benchmark
Here's an example output of the benchmarks run on a MacBook Pro 2017:
html-to-react - Single x 415,186 ops/sec ±0.92% (85 runs sampled)
html-to-react - Multiple x 139,780 ops/sec ±2.32% (87 runs sampled)
html-to-react - Complex x 8,118 ops/sec ±2.99% (82 runs sampled)
Contributors
Code Contributors
This project exists thanks to all the people who contribute. [Contribute].
Financial Contributors
Become a financial contributor and help us sustain our community. [Contribute]
Individuals
Organizations
Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]
Support
License
FAQs
HTML to React parser.
The npm package html-react-parser receives a total of 1,113,430 weekly downloads. As such, html-react-parser popularity was classified as popular.
We found that html-react-parser demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Package last updated on 03 Nov 2020
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Security News
Research
Typosquatting Cryptographic Libraries: Malicious npm Packages Threaten Crypto Developers with Keylogging and Wallet Theft
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
By Kirill Boychenko - Nov 27, 2024
Security News
Weekly Downloads Now Available in npm Package Search Results
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
By Sarah Gooding - Nov 26, 2024