Have ideas to improve npm?Join in the discussion! »

    react-truncate-html

    0.1.7 • Public • Published

    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, 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 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, 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

    npm i react-truncate-html --save
    yarn add react-truncate-html
    whatever-new-package-manager-we-will-have-next-month install react-truncate-html

    etc...

    Usage

    Simple example (truncate after 3 lines):

    import Truncate from 'react-truncate-html';
     
    <Truncate
      lines={3}
      dangerouslySetInnerHTML={{
       __html: "Hi, <strong>here’s some</strong> <i>HTML</i>"
      }}
    />

    Complex example (don't listen for browser resizing events, don’t break words, use 4 lines on portrait mode):

    <Truncate 
      lines={3} 
      portrait={4} 
      breakWord={false} 
      responsive={false} 
      dangerouslySetInnerHTML={{
        __html: "Hi, <strong>here’s some</strong> <i>HTML</i>"
      }}
    />

    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 <Truncate style={{color: ‘yellow’}}/> will work.

    Install

    npm i react-truncate-html

    DownloadsWeekly Downloads

    2,343

    Version

    0.1.7

    License

    MIT

    Unpacked Size

    54 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar