Truncate Text
A component that truncates text content with a configurable line clamp and provides a toggle to expand/collapse the content.
Overview
The TruncateText component is a specialized component that allows users to truncate long text content with a configurable line clamp. It provides a toggle button to expand and collapse the content, with smooth animations for a better user experience.
Default
import * as UI from "@iyk/ui"
export default () => (
<UI.TruncateText
lineClamp={2}
triggerText={{
idle: "View more",
opened: "View less",
}}
>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit
amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur
adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quisquam, quos.
</UI.TruncateText>
)With Short Text
When the text is short, the component will not show the toggle button. But it will still truncate the text if the screen is small and the text is too long for the screen.
- NOTE: To avoid layout shifts, the component does not remove the button from the DOM, but hides it using visibility:hidden. Otherwise, the component will cause a layout shift when the button appears above the text.
import * as UI from "@iyk/ui"
export default () => (
<UI.TruncateText
lineClamp={2}
triggerText={{
idle: "View more",
opened: "View less",
}}
>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit
amet consectetur adipisicing elit.
</UI.TruncateText>
)With Gradient
import * as UI from "@iyk/ui"
export default () => (
<UI.TruncateText
lineClamp={2}
gradient
triggerText={{
idle: "View more",
opened: "View less",
}}
>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit
amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</UI.TruncateText>
)Props
lineClamp
number
The number of lines to show before truncating the content.
triggerText
{ idle: string; opened: string }
The text to display on the toggle button in idle and opened states.
gradient
boolean
Whether to apply a gradient to the truncated text.
animationDuration
number
The duration of the expand/collapse animation in milliseconds. Defaults to 300.
className
string
Additional CSS classes to apply to the component.