diff --git a/Truncate.js b/Truncate.js index a9e6119..cda2f29 100644 --- a/Truncate.js +++ b/Truncate.js @@ -138,16 +138,16 @@ class Truncate extends Component { if (words[words.length - 1]) { words[words.length - 1] = words[words.length - 1].replace(/(,$)/g, '').replace(/(\.$)/g, ''); } - words.push(this.conf.ellipsis); + words.push(this.props.ellipsis); return words.join(' '); } else { if (words[words.length - 1]) { words[words.length - 1] = words[words.length - 1].replace(/(,$)/g, '').replace(/(\.$)/g, ''); - words.push(this.conf.ellipsis); + words.push(this.props.ellipsis); return [words.join(' '), str2]; } else if (!words[words.length - 1] && str2) { let st = ' ' + str2.trim().replace(/(,$)/g, '').replace(/(\.$)/g, '') + ' '; - words.push(this.conf.ellipsis); + words.push(this.props.ellipsis); return [words.join(' '), st]; } } diff --git a/readme.md b/readme.md index 79cfef4..90bb115 100644 --- a/readme.md +++ b/readme.md @@ -9,6 +9,10 @@ react-truncate-html is based on [ellipsis.js](https://github.com/glinford/ellips - Pure JS, no weird css hacks - High configurability +## When to use `react-truncate-html` +As mentioned above, **only use `react-truncate-html` when you want to truncate HTML** +Use [`react-truncate`](https://www.npmjs.com/package/react-truncate) for everything else. + ## Sanitizing Although you pass your html through `dangerouslySetInnerHTML`, `react-truncate-html` will sanitize input passed to it. _Do keep in mind that RTH explicitly santizes input, other elements besides RTH **will not filter input when using `dangerouslySetInnerHTML`** and in that case, you are personally responsible for sanitizing input_ @@ -38,20 +42,28 @@ _etc..._ ## Usage Simple example (truncate after 3 lines): -``` +```jsx import Truncate from 'react-truncate-html'; -here’s some HTML”}}/> + +here’s some HTML" + }} +/> ``` Complex example (don't listen for browser resizing events, don’t break words, use 4 lines on portrait mode): -``` +```jsx here’s some HTML”}} - /> + lines={3} + portrait={4} + breakWord={false} + responsive={false} + dangerouslySetInnerHTML={{ + __html: "Hi, here’s some HTML" + }} +/> ``` ## Available props