Can this library also support a 'collapse' functionality?
nupurkapoor opened this issue · comments
Hey does this library also support a 'collapse' functionality? What If I want user to be able to collapse content back after expanding it? If its not available by default, how do you suggest I extend it to add the functionality?
This library does not have any 'expand' or 'collapse' functionality built in. But you can easily wrap the component to achieve it. Just render a full content element or the clamped component depending on a state. See the docs page as an example https://github.com/xiaody/react-lines-ellipsis/blob/v0.10.0/docs/app.js#L69-L82
Hey thank you for your response, I tried as you suggested. I could easily extend it to have a show more/show less button though the rendered text is not collapse on initial page load even though useEllipsis is set to true, currently, the element starts off fully rendered, then reduces its height if there's more content.
This happens even if I am just using the library without extending it.
this is not good user behavior.. any solution for this?
Unfortunately the "full content flash" is hard to deal with. Because this component needs to wait till the browser has fully layouted all the text, and only then to get the layout info and clamp the text. So this component does not work on the server side nor with JavaScript disabled.
The choices you have are:
- use the loose version (only works on webkit/blink browsers; and not so easy to customize the ellipsis text
...) - use an estimate height and set overflow till your extended component finish mounting
None of these methods is perfect. But there is not much we can do to help it.