{"repo":"drenther/use-clamp-text","free":true,"listed":false,"github":"https://github.com/drenther/use-clamp-text","clone":"git clone https://github.com/drenther/use-clamp-text.git","description":"react hook to clamp multiline text to a given height in a responsive way and with extreme flexibility (under 2.5kb)","language":"TypeScript","stars":180,"topics":["hook","hooks","react","react-hooks","typescript","clamp-text"],"license":"MIT","category":"ui-components","readme_excerpt":"use-clamp-text react hook to clamp multiline text to a given height in a responsive way and with extreme flexibility (under 2.5kb) Line Clampin’ (Truncating Multiple Line Text) is a major hassle still for most browsers. This tiny react hook eases that pain. Why hook? Cause it gives extreme flexibility over how you want to control the text. Do you want truncate it or not? When to truncate it? How to show read more interactions? and more... Usage Basic Example Advanced Example Check out the codesandbox example API Reference Arguments The hook accepts only a single object argument is accepted with the following properties: property type required default description --------- ------------------ -------- ------- ------------------------------------------------------------------------------------------------------------------------------------------------------------------ text string true Text you wish to clamp ellipsis string \\ number false '…' String displayed after the clamped text or number of characters to be trimmed off the string (useful for adding inline custom ellipsis like a or ) expanded boolean false false To control whether the string should be truncated or not lines number false 3 Number of visible lines debounce number false 300 Time in milliseconds used for debounce charWidth number false 1.2 Character width to be assumed for calculating clamped string length (an average depending on your font size should work well enough) Return The hook returns a tuple - - [0] (f","default_branch":null,"files":null,"tree":[],"storefront":"/r/drenther","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/drenther/use-clamp-text/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}