@hotoo/react-sanitized-html

react-sanitized-html

A React component that will sanitize user-inputted HTML code, using the popular sanitize-html package.

Install

This React component requires both react and sanitize-html to be installed to work. We marked both as peer dependency so you could use the version of React as it fit.

Run npm install react-sanitized-html sanitize-html --save to install this package.

Because both htmlparser2 and domhandler (dependencies of sanitize-html) requires ES2015 Property Accessors for shorthanded properties. Thus, this component cannot be used in IE8.

In sanitize-html@1.14.1, shorthands are not used. Thus, it is possible to build a workaround for IE8 by customizing both [htmlparser2] and [domhandler] without shorthands.

Example usage

import SanitizedHTML from 'react-sanitized-html';

const HTML_FROM_USER = '<a href="http://bing.com/">Bing</a>';

ReactDOM.render(
  <SanitizedHTML html={ HTML_FROM_USER } />,
  document.getElementById('reactRoot')
);

It will output as:

<div>
  <a href="http://bing.com/">Bing</a>
</div>

Options

You can add sanitize-html options as props. For example,

<SanitizedHTML
  allowedAttributes={{ 'a': ['href'] }}
  allowedTags={['a']}
  html={ `<a href="http://bing.com/">Bing</a>` }
/>

You can find more options here.

Development

To setup your development environment, after cloning the repository, run the following steps.

npm install react sanitize-html
npm install --only=development

Then run npm test to run all tests.

Contribution

Like us? Star us.

Found an issue? File us an issue.