search

bsidelinger912 / shiitake

React Line clamp that won't get you fired
MIT License
100 stars 22 forks source link

Customize '...' #11

Closed ccachor closed 7 years ago

ccachor commented 7 years ago

Is there a way to replace the "..." text with "read more"?

bsidelinger912 commented 7 years ago

Hi @ccachor, would you need it to be a link or something? I think I could make an optional prop for what is after the trimmed text (defaulting to "...") but I'm curious if we'd need to support strings only or DOM nodes too.

ccachor commented 7 years ago

I'm looking for "read more" text, preferably a DOM node but a string would work as well. The way I'm implementing it is the whole Shiitake component is wrapped in a div with an onClick event. I think a DOM node would help with styling, though. Thank you for the quick response!

bsidelinger912 commented 7 years ago

Yeah, I can see how you'd want to style/format the "read more" and maybe even make that portion alone a link. Trimming text that has DOM nodes mixed in is super tricky a la https://github.com/bsidelinger912/shiitake/issues/6, but adding it to the end should be somewhat easier because all I really need to know is the size of that block, and I never have to trim inside that block. The challenge I can see off the bat is when someone inevitably styles the filler text with a different/bigger font, but I think I have an idea that'll mitigate that issue. I'll try it out this week and see what I can come up with.

bsidelinger912 commented 7 years ago

Ok @ccachor I've finally got this done and it's released in 2.1.1, there's a new prop called "overflowNode" that you can pass jsx or a string to. You can see it in action in my code pen here: https://codepen.io/bsidelinger912/pen/zBgwmd. I put in a link example, which is what I believe you need. Let me know when you have a chance to check it out and thanks for your patience!

bsidelinger912 commented 7 years ago

I'm going to close that as I believe it's resolved. Feel free to open another if this feature doesn't cover your needs @ccachor.