{"library":"react-sanitizer-parser","title":"React HTML Sanitizer Parser","description":"The `react-sanitizer-parser` package is a React component and utility library designed to safely render HTML content within React applications, mitigating XSS vulnerabilities. It acts as a convenient wrapper around two well-established libraries: `html-react-parser` for converting HTML strings into React elements and `DOMPurify` for robust HTML sanitization. As of version 0.1.4, it provides a `<ReactSanitizerParser>` component that takes a `dirty` HTML string as children, along with optional `htmlParserOptions` and `sanitizerConfig` props to fine-tune the behavior of its underlying dependencies. Additionally, it re-exports the `parse` function from `html-react-parser` and the `DOMPurify` object directly for more granular, imperative usage. Its primary differentiator is simplifying the integration of HTML parsing and sanitization into React, offering a streamlined API compared to configuring both libraries independently.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-sanitizer-parser"],"cli":null},"imports":["import ReactSanitizerParser from 'react-sanitizer-parser';","import { parse } from 'react-sanitizer-parser';","import { DOMPurify } from 'react-sanitizer-parser';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport ReactSanitizerParser, { parse, DOMPurify } from \"react-sanitizer-parser\";\n\nconst App = () => {\n  const dirtyHtmlWithScript = `\n    <div>\n      <p>This is some <strong>safe</strong> content.</p>\n      <script>alert('XSS attempt!');</script>\n      <img src=\"x\" onerror=\"alert('Another XSS!');\">\n      <a href=\"javascript:alert('Even more XSS!');\">Click me</a>\n      <p style=\"color:red;\">Styled paragraph</p>\n    </div>\n  `;\n\n  // Example of a highly restricted DOMPurify configuration\n  const highlyRestrictedConfig = {\n    USE_PROFILES: { html: false, svg: false, mathMl: false }, // Disable all profiles\n    FORBID_TAGS: ['div', 'span', 'img', 'a', 'p'],\n    FORBID_ATTR: ['style', 'href', 'src', 'onerror'],\n  };\n\n  // Using the re-exported DOMPurify directly\n  const pureHtml = DOMPurify.sanitize(\"<img src=x onerror=alert(1)//>\");\n  console.log(\"DOMPurify direct sanitize:\", pureHtml); // Expect: <img src=\"x\">\n\n  // Using the re-exported parse function directly\n  const pureParse = parse(\"<h2>Parsed directly without sanitization</h2>\");\n\n  return (\n    <div>\n      <h1>Using ReactSanitizerParser Component</h1>\n      <p>Default sanitization (scripts, onerror, javascript:href removed, style kept by default):</p>\n      <ReactSanitizerParser>{dirtyHtmlWithScript}</ReactSanitizerParser>\n\n      <h2>Sanitization with custom DOMPurify config (highly restricted):</h2>\n      <ReactSanitizerParser sanitizerConfig={highlyRestrictedConfig}>\n        {dirtyHtmlWithScript}\n      </ReactSanitizerParser>\n\n      <h2>Direct parse from html-react-parser re-export (no sanitization by default):</h2>\n      {pureParse}\n\n      <h2>Result of DOMPurify re-export (imperative sanitization):</h2>\n      <div dangerouslySetInnerHTML={{ __html: pureHtml }} />\n    </div>\n  );\n};\n\nexport default App;\n","lang":"typescript","description":"This quickstart demonstrates the primary usage of the `ReactSanitizerParser` component, including how to pass `sanitizerConfig` for custom DOMPurify rules. It also shows the direct use of the re-exported `parse` function from `html-react-parser` and the `DOMPurify` object for imperative HTML processing.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}