react-sanitizer-parser

💻 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 './ReactSanitizerParser';

const Example = () => {
  const dirty = `
    <div>
      <span>
        React Sanitizer Parser
      </span>
    </div>
  `;

  return (
    <ReactSanitizerParser>{dirty}</ReactSanitizerParser>
  );
}

htmlParserOptions & sanitizerConfig

• html-react-parser Options
• DOMPurify Config

import ReactSanitizerParser from './ReactSanitizerParser';

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>
    </>
  );
}