Expandable Text
Truncates long text to a single line. Clicking the element expands it to show the full content. The full text is also accessible via a tooltip on hover.
Import
import { ExpandableText } from "@phpcreation/frontend-components-react-nextjs-bundle/components/ExpandableText";Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
id | string | ✅ | — | Unique identifier |
text | string | ✅ | — | The full text content to display |
showLessMoreText | boolean | — | false | Show “Show more / Show less” label |
Usage
import { ExpandableText } from "@phpcreation/frontend-components-react-nextjs-bundle/components/ExpandableText";
// In a table cell with long description
<ExpandableText
id="product-desc-42"
text="This is a very long product description that would overflow the table cell and make the layout look bad..."
/>
// With show more/less labels
<ExpandableText
id="notes-field"
text={entity.notes}
showLessMoreText
/>Behavior
- Collapsed state: single-line truncation with ellipsis (
line-clamp-1) - Expanded state: full text shown
- Tooltip: full text accessible on hover regardless of state
- Click anywhere on the element to toggle expand/collapse
Related
Last updated on