How can I use DOMPurify in my React application?

How can I use DOMPurify in my React application?

You can use DOMPurify to sanitize HTML in your React app by installing it via npm and then using it in your components.

Can you show me a code example?

Sure! First, install DOMPurify with npm install dompurify. Then, you can use it like this:

import DOMPurify from 'dompurify';

const MyComponent = ({ dirtyHtml }) => {
  const cleanHtml = DOMPurify.sanitize(dirtyHtml);
  return <div dangerouslySetInnerHTML={{ __html: cleanHtml }} />;
};

Is it safe to use dangerouslySetInnerHTML with DOMPurify?

Yes, using DOMPurify to sanitize the HTML before passing it to dangerouslySetInnerHTML is a safe practice.

What are some common use cases for DOMPurify in React?

Common use cases include rendering user-generated content, displaying HTML from APIs, and preventing XSS attacks.