# react-truncate-html We all know how this goes: one day you’re just minding your own business, and then suddenly hear your content manager say ‘but we also want to use html in the summaries’, you yell out ‘why?!’ and shake your head in disbelief, sadly; the choice isn’t up to you. Good news, luckily for you there’s `react-truncate-html`, which unlike `react-truncate` also supports html (who would’ve guessed, right?!) react-truncate-html is based on [ellipsis.js](https://github.com/glinford/ellipsis.js), so it features: - Full responsiveness - 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_ ## Caveats - **No react children allowed!** Because of the dom manipulation react-truncate-html does, it only supports html as a string. The only way to set it’s content is by passing dangerouslySetInnerHTML. (see warning above, too) - Not very performance friendly: [As the author of ellipsis.js mentions](https://github.com/glinford/ellipsis.js), having 100 elements with 100 lines is not an option, as it does some heavy computations. - Doesn't work on server side: we can't compute height and stuff on the server side, so passed HTML will be kept intact on server side. (but don't worry, rendering won't differ) ## Installation ```bash npm i react-truncate-html --save ``` ```bash yarn add react-truncate-html ``` ```bash whatever-new-package-manager-we-will-have-next-month install react-truncate-html ``` _etc..._ ## Usage Simple example (truncate after 3 lines): ```jsx import Truncate from 'react-truncate-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" }} /> ``` ## Available props | Name | Type | Default | Desc | |------------|--------|---------|--------------------------------------------------------------------------------------------------------| | debounce | Number | 100 | Use a timeout before recalculating when resizing the window. | | responsive | Bool | true | If you want the ellipsis to move with the window resizing | | lines | Number | 2 | Number of lines you wish to have before the ellipsis will appear | | portrait | Number | null | Additionally, you can set a different amount of lines when using portrait mode | | breakWord | Bool | true | If true the words can be truncated by the ellipsis, eg: "Hello Wo…", if false they won't, eg "Hello …" | _Additional props will be transferred over to react-truncate-html’s internal tag, so, for example `` will work._

	Stars	Issues	Version	Updated	Created
react-clamp	6	0	1.0.5	7 years ago	8 years ago
react-line-clamp	8	0	1.2.6	6 years ago	8 years ago
react-text-truncate	324	24	0.19.0	2 years ago	9 years ago
react-truncate-html	50	11	0.1.7	6 years ago	7 years ago
read-more-react			1.0.10	4 years ago	7 years ago

react-clamp vs react-line-clamp vs react-text-truncate vs react-truncate-html vs read-more-react

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past