💻 react-sanitizer-parser
react-sanitizer-parser is a React element sanitizer parser that utilizes the html-react-parser and dompurify libraries.
install
npm install react-sanitizer-parser
yarn add react-sanitizer-parser
Usage
import ReactSanitizerParser from "react-sanitizer-parser";
const Example = () => {
const dirty = `
<div>
<span>
React Sanitizer Parser
</span>
</div>
`;
return (
<ReactSanitizerParser>{dirty}</ReactSanitizerParser>
);
}htmlParserOptions & sanitizerConfig
import ReactSanitizerParser from "react-sanitizer-parser";
const Example = () => {
const dirty = `
<div>
<span>
React Sanitizer Parser
</span>
</div>
`;
return (
<ReactSanitizerParser
htmlParserOptions={{ /* ...html-react-parser options */ }}
sanitizerConfig={{ /* ...dompurify config*/}}
>
{dirty}
</ReactSanitizerParser>
);
}parse, DOMPurify
If you need to, you can use the parse method of html-react-parser and DOMPurify's DOMPurify directly.
import ReactSanitizerParser, { parse, DOMPurify } from "react-sanitizer-parser";
function App() {
console.log(DOMPurify.sanitize("<img src=x onerror=alert(1)//>")); // <img src="x">
return (
<>
{parse("<div>React</div>")}
<ReactSanitizerParser>{`<div>React</div>`}</ReactSanitizerParser>
</>
);
}