A React component that will sanitize user-inputted HTML code, using the popular sanitize-html
package.
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
anddomhandler
(dependencies ofsanitize-html
) requires ES2015 Property Accessors for shorthanded properties. Thus, this component cannot be used in IE8.
In
[email protected]
, shorthands are not used. Thus, it is possible to build a workaround for IE8 by customizing both [htmlparser2
] and [domhandler
] without shorthands.
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>
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.
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.
Like us? Star us.
Found an issue? File us an issue.