https://github.com/compulim/react-sanitized-html
A React component that will sanitize user-inputted HTML code, using the popular sanitize-html package
https://github.com/compulim/react-sanitized-html
Last synced: over 1 year ago
JSON representation
A React component that will sanitize user-inputted HTML code, using the popular sanitize-html package
- Host: GitHub
- URL: https://github.com/compulim/react-sanitized-html
- Owner: compulim
- License: mit
- Created: 2017-03-07T13:55:01.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T19:48:50.000Z (over 3 years ago)
- Last Synced: 2024-04-14T19:22:57.561Z (over 2 years ago)
- Language: JavaScript
- Size: 871 KB
- Stars: 19
- Watchers: 3
- Forks: 12
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# react-sanitized-html
[](https://npmjs.com/package/react-sanitized-html) [](https://travis-ci.org/compulim/react-sanitized-html) [](https://david-dm.org/compulim/react-sanitized-html) [](https://npmjs.com/package/react-sanitized-html)
A React component that will sanitize user-inputted HTML code, using the popular [`sanitize-html`](https://npmjs.com/package/sanitize-html) package.
# Install
This React component requires both [`react`](https://npmjs.com/package/react) and [`sanitize-html`](https://npmjs.com/package/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`](https://npmjs.com/packages/htmlparser2) and [`domhandler`](https://npmjs.com/packages/domhandler) (dependencies of [`sanitize-html`](https://npmjs.com/packages/sanitize-html)) requires [ES2015 Property Accessors](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors) for shorthanded properties. Thus, this component cannot be used in IE8.
> In [`sanitize-html@1.14.1`](https://npmjs.com/packages/sanitize-html), shorthands are not used. Thus, it is possible to build a workaround for IE8 by customizing both [`htmlparser2`] and [`domhandler`] without shorthands.
# Example usage
```jsx
import SanitizedHTML from 'react-sanitized-html';
const HTML_FROM_USER = 'Bing';
ReactDOM.render(
,
document.getElementById('reactRoot')
);
```
It will output as:
```html
```
# Options
You can add [`sanitize-html`](https://npmjs.com/package/sanitize-html) options as props. For example,
```html
Bing` }
/>
```
You can find more options [here](https://npmjs.com/package/sanitize-html).
# 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](https://github.com/compulim/react-sanitized-html/stargazers) us.
Found an issue? [File](https://github.com/compulim/react-sanitized-html/issues) us an issue.