\n {ReactHtmlParser(htmlString, options)}\n
\n );\n}\n\n// Example usage in a parent component\nclass App extends React.Component {\n render() {\n const exampleHtml = `\n Welcome!
\nThis is some HTML content parsed by react-html-parser.
Visit our about page or an external site.
\n \n `;\n return (\n\n
\n );\n }\n}\n\nexport default App;","lang":"javascript","description":"This example demonstrates how to parse an HTML string into React components using `ReactHtmlParser`, including the use of a `transform` function to modify elements (e.g., adding `target=\"_blank\"` to external links) or prevent rendering of specific tags like `script` for security. It showcases handling attributes and passing options."},"warnings":[{"fix":"Sanitize all untrusted or user-generated HTML input using a robust library such as `DOMPurify` before passing it to `ReactHtmlParser`.","message":"While `react-html-parser` avoids `dangerouslySetInnerHTML`, parsing arbitrary, untrusted HTML without prior sanitization can still introduce Cross-Site Scripting (XSS) vulnerabilities. The `transform` function can provide some control, but a dedicated HTML sanitizer (like DOMPurify) is strongly recommended for user-generated or untrusted content.","severity":"gotcha","affected_versions":"All"},{"fix":"Ensure your project's React version is within the compatible range. If using npm v7+, `npm install --legacy-peer-deps` might temporarily resolve installation errors but is not recommended for production without careful consideration of potential incompatibilities.","message":"The package has a peer dependency on React versions `^0.14.0 || ^15.0.0 || ^16.0.0-0`. Using an incompatible React version (e.g., React 17 or 18) will lead to installation errors or potential runtime issues.","severity":"gotcha","affected_versions":"All"},{"fix":"If the old behavior of preserving HTML entities is desired, set the `decodeEntities` option to `false`: `ReactHtmlParser(html, { decodeEntities: false })`.","message":"Since `v2.0.0`, HTML entities (e.g., `&`) are decoded by default. This changes the behavior from `v1.x` where entities were preserved as-is.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Manually wrap these tags in `div` elements within your HTML string if the previous structure is essential, or adjust your CSS and layout expectations to account for the direct rendering of these tags.","message":"As of `v2.0.0`, ``, ``, and `` tags are no longer automatically converted to `` elements. This change might impact styling or DOM structure if your application was relying on the previous automatic wrapping behavior.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Upgrade to `react-html-parser@1.0.2` or a later version to ensure correct rendering of void elements and boolean attributes.","message":"Versions prior to `v1.0.2` contained known bugs related to incorrectly rendering void elements (like `![]()
`, `
`) and boolean attributes (e.g., `disabled`, `checked`). Using these older versions can lead to malformed HTML output.","severity":"gotcha","affected_versions":"<1.0.2"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Change your import statement from `import ReactHtmlParser from 'react-html-parser';` to `import { ReactHtmlParser } from 'react-html-parser';`.","cause":"The `ReactHtmlParser` function is a named export, but it was imported as a default export.","error":"TypeError: ReactHtmlParser is not a function"},{"fix":"Adjust your project's `react` version to be compatible (e.g., `react@16`). If absolutely necessary and aware of potential incompatibilities, you might use `npm install --legacy-peer-deps` (for npm v7+) but this is not a recommended long-term solution.","cause":"Your project's installed `react` version (e.g., React 17 or 18) falls outside the peer dependency range (`^0.14.0 || ^15.0.0 || ^16.0.0-0`) required by `react-html-parser`.","error":"npm ERR! ERESOLVE unable to resolve dependency tree` or `peer dependency: react@^17.0.0"},{"fix":"Ensure the `decodeEntities` option is set to `true` (which is the default behavior since `v2.0.0`), or upgrade to `v2.0.0` or higher to benefit from default entity decoding. For `v1.x`, you would need to manually decode entities before passing the HTML string.","cause":"The `decodeEntities` option is explicitly set to `false`, or you are using `v1.x` of the library where entity decoding was off by default.","error":"HTML entities (e.g., `<`, `&`) are displayed as plain text instead of their decoded characters (<, &)."}],"ecosystem":"npm"}
`) and boolean attributes (e.g., `disabled`, `checked`). Using these older versions can lead to malformed HTML output.","severity":"gotcha","affected_versions":"<1.0.2"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Change your import statement from `import ReactHtmlParser from 'react-html-parser';` to `import { ReactHtmlParser } from 'react-html-parser';`.","cause":"The `ReactHtmlParser` function is a named export, but it was imported as a default export.","error":"TypeError: ReactHtmlParser is not a function"},{"fix":"Adjust your project's `react` version to be compatible (e.g., `react@16`). If absolutely necessary and aware of potential incompatibilities, you might use `npm install --legacy-peer-deps` (for npm v7+) but this is not a recommended long-term solution.","cause":"Your project's installed `react` version (e.g., React 17 or 18) falls outside the peer dependency range (`^0.14.0 || ^15.0.0 || ^16.0.0-0`) required by `react-html-parser`.","error":"npm ERR! ERESOLVE unable to resolve dependency tree` or `peer dependency: react@^17.0.0"},{"fix":"Ensure the `decodeEntities` option is set to `true` (which is the default behavior since `v2.0.0`), or upgrade to `v2.0.0` or higher to benefit from default entity decoding. For `v1.x`, you would need to manually decode entities before passing the HTML string.","cause":"The `decodeEntities` option is explicitly set to `false`, or you are using `v1.x` of the library where entity decoding was off by default.","error":"HTML entities (e.g., `<`, `&`) are displayed as plain text instead of their decoded characters (<, &)."}],"ecosystem":"npm"}