ShinyChang/React-Text-Truncate

Infinitely re-rendering

reintroducing opened this issue · 7 comments

I just added this component to truncate a small piece of copy and I see that its updating ALL the time. I imagine this is not the intended behavior: https://www.dropbox.com/s/hcx0kj0cnjb447a/Screenshot%202016-06-14%2018.31.27.png?dl=0

I'm using react-a11y which puts IDs on elements during development to help identify them. That ID you see is being updated for both the containing div and TextTruncate div constantly. What am I missing here? Here is the code I'm using:

<div className="MessagesSnapshot-item-message">
    <TextTruncate className="MessagesSnapshot-item-message" line={2} text="I see by your Health Assessment that you're a very good listener and you like fruit." />
</div>

Also, as you can see in the screenshot, TextTruncate doesn't absorb the className. It would be nice if that was added as well.

@reintroducing

This is a bug, and I will fix soon.

className and others attributes will be add also :)

Thanks.

Great, thanks. Would you mind publishing the update to npm?

Disregard, I see that you did. Not sure why when I did npm i react-text-truncate it was installing 0.6.2. Updated my package.json version to 0.7.0 and ran npm i and that worked. Thanks!

So that fixed the re-rendering issue but I think the addition of className should probably be put on the parent container, not on the text div. It makes it hard to style the containing element if you can't access it because its just a div, there is no way to reference it through CSS. Maybe have something like containerClassName prop?

yep, you are right. Will add new prop containerClassName in the future.

I published new version for this feature. Happy using!

great, thanks! the readme probably needs an update to point it out (and the github pages site).