Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProLong text clamped to a set number of lines with a Read more button that appears only when the text is cut off and keeps aria-expanded in sync.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it for descriptions, reviews and bios whose length varies: short ones show in full, long ones show a few lines and can be expanded in place.
Do not use it to hide required information such as terms. Text clamped this way cannot be found with find-in-page; use disclosure when that matters.
| Prop | Type | Default | Description |
|---|---|---|---|
lines | number | 3 | Lines shown while collapsed. |
expandLabel | string | Read more | Label of the button while collapsed. |
collapseLabel | string | Read less | Label while expanded. |
defaultExpanded | boolean | false | Start expanded. |
onExpandedChange | (expanded: boolean) => void | - | Called on toggle. |
aria-expanded and aria-controls pointing at the text.| Key | Action |
|---|---|
| Enter or Space | expands or collapses |
The component ships a Testing Library test (read-more.test.tsx) that covers no button when the text fits, expanding and collapsing and starting expanded.