Empty strings break the component

[zoltantothcom]

Empty strings break the component

[zoltantothcom]

Thank you for taking the time and reporting the issue. It's fixed now.

[acontreras89]

@zoltantothcom to be completely honest, I was thinking the problem was the other way around. I feel like the component should render normally for empty strings. Is there a reason it isn't?

Why not change the guard in render to something like:

if (typeof this.props.text !== 'string') return null

[zoltantothcom]

@acontreras89
The reasons I don't really want to render it for empty strings are:

• since there is no text to clamp - the component is pointless and just pollutes the DOM and the virtual DOM
• most importantly an event listener, involved in the responsive behavior, is being attached to a rendered component. So imagine, for example, a page with a list of 100 "articles" and the API endpoint that returns empty strings for half of them (like some of them have a summary that needs a clamp and the others don't) - so there will be 50 redundant event listeners on the page. Not good.

[acontreras89]

@zoltantothcom I guess to me the library should focus on being intuitive and consistent more than addressing specific use cases.

the component [...] just pollutes the DOM

Having the component rendered for empty strings makes your resulting html consistent for all valid strings. Users can always choose not to use it for empty (or short) strings.

an event listener [...] is being attached

In cases where text fits without clamping, the listener is being attached too. It would be very nice to have this kind of optimization, but handling this scenario in this way made the component confusing to me.
Also, if you really want to get rid of the listener, you can still expand on the current condition a couple of lines below.

if (this.watch && this.props.text) {
  window.addEventListener('resize', this.debounced);
}