ExpandableRichText

The ExpandableRichText component truncates long text and provides a “Read more” button.

Playground

Props

Examples

Custom Lines

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus.

Custom Color

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.

Props

Prop	Type	Default	Description
`as`	`ElementType`	`'div'`	The HTML element context.
`children`	`ReactNode`	-	The rich text content.
`className`	`string`	-	Additional CSS classes.
`color`	`ThemeColor`	`'link'`	The color of the “Read more” button.
`expandable`	`boolean`	`true`	Enables or disables the truncation logic.
`lines`	`number`	`3`	The number of lines to show when collapsed.
`onExpand`	`(expanded: boolean) => void`	-	Callback when expansion state changes.