Skip to content

Commit

Permalink
fix(html): remove sanitize-html-react, reduce package size
Browse files Browse the repository at this point in the history
Remove sanitize html, to reduce our package size. Document
the need for sanitization in the readme.

Fixes ReactTooltip#429
  • Loading branch information
aronhelser committed Jan 1, 2019
1 parent 76910c4 commit 177ac11
Show file tree
Hide file tree
Showing 6 changed files with 3,456 additions and 12,198 deletions.
6 changes: 5 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ Global|Specific |Type |Values | Description
offset | data-offset | Object | top, right, bottom, left | `data-offset="{'top': 10, 'left': 10}"` for specific and `offset={{top: 10, left: 10}}` for global
multiline | data-multiline | Bool | true, false | support `<br>`, `<br />` to make multiline
className | data-class | String | | extra custom class, can use !important to overwrite react-tooltip's default class
html | data-html | Bool | true, false | `<p data-tip="<p>HTML tooltip</p>" data-html={true}></p>` or `<ReactTooltip html={true} />`
html | data-html | Bool | true, false | `<p data-tip="<p>HTML tooltip</p>" data-html={true}></p>` or `<ReactTooltip html={true} />`, but see [Security Note](#security-note) below.
delayHide | data-delay-hide | Number | | `<p data-tip="tooltip" data-delay-hide='1000'></p>` or `<ReactTooltip delayHide={1000} />`
delayShow | data-delay-show | Number | | `<p data-tip="tooltip" data-delay-show='1000'></p>` or `<ReactTooltip delayShow={1000} />`
delayUpdate | data-delay-update | Number | | `<p data-tip="tooltip" data-delay-update='1000'></p>` or `<ReactTooltip delayUpdate={1000} />` Sets a delay in calling getContent if the tooltip is already shown and you mouse over another target
Expand All @@ -78,6 +78,10 @@ className | data-class | String | | extra custom class, can use !importan
resizeHide | null | Bool | true, false | Hide the tooltip when resizing the window, default is true
wrapper | null | String | div, span | Selecting the wrapper element of the react tooltip, default is div

### Security Note

The `html` option allows a tooltip to directly display raw HTML. This is a security risk if any of that content is supplied by the user. Any user-supplied content must be sanitized, using a package like [sanitize-html-react](https://www.npmjs.com/package/sanitize-html-react). We chose not to include sanitization after discovering it [increased our package size](https://github.com/wwayne/react-tooltip/issues/429) too much - we don't want to penalize people who don't use the `html` option.

## Using react component as tooltip
Check the example [React-tooltip Test](https://react-tooltip.netlify.com/)

Expand Down
Loading

0 comments on commit 177ac11

Please sign in to comment.