Last active
May 23, 2017 00:51
-
-
Save cbosco/4339f6d842c6c9ac35f21982e98b4412 to your computer and use it in GitHub Desktop.
React component for truncation with ellipsis.js (supporting HTML entities)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* This component can truncate text AND HTML markup with ellipsis. | |
* Inspired by this github issue: https://github.com/One-com/react-truncate/issues/8#issuecomment-262639343 | |
* This component is not managed by react VDOM and mutates its own DOM | |
*/ | |
const Ellipsis = require('imports?self=>{}!ellipsis.js'); // shim `self` | |
import React, { Component } from 'react'; | |
class TruncateWithEllipsis extends Component { | |
configure() { | |
const { lines } = this.props; | |
this.ellipsis = Ellipsis({ | |
ellipsis: '…', //default ellipsis value | |
//debounce: 500, //if you want to chill out your memory usage on resizing | |
responsive: false, //if you want the ellipsis to move with the window resizing | |
class: false, | |
lines, //default number of lines when the ellipsis will appear | |
break_word: true, //default the ellipsis can truncate words | |
}); | |
} | |
componentWillMount() { | |
this.configure(); | |
} | |
componentDidMount() { | |
if (this.ellipsis && this.truncateContainer) { | |
this.ellipsis.add(this.truncateContainer); | |
} | |
} | |
// Turn off react because we mutate with Ellipsis | |
shouldComponentUpdate(){ | |
return false; | |
} | |
render() { | |
const { children } = this.props; | |
return ( | |
<div ref={(node) => { this.truncateContainer = node; }}> | |
{children} | |
</div> | |
); | |
} | |
} | |
export default TruncateWithEllipsis; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hey there. Just found this gist from your comments here. Did you ever discover if there is a way to cleanup the ellipsis events and such once the component unmounts?