Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe.

Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior.

Playground

• Import path: @enadhq/enad-react-sdk/client/storefront.
• Live playground: /components/storefront/truncated-text.

When to use it

Use TruncatedText when the page has real long-form copy but should start with a tighter preview. It works well for product descriptions, editorial excerpts, and policy sections where the visitor may want the full text without navigating away.

If the content is always short, render the rich text directly instead of adding a read-more interaction.

Composition notes

html is the rendered body content. visibleLines controls how much of the content shows before the expand action appears, and labels lets you tune the expand and collapse copy for the page context.

Because the component renders HTML, keep the source content clean and predictable. Large nested markup will make the preview harder to judge and style consistently.

Behavior and theming guidance

Choose the initial line clamp based on intent. Product detail pages often need 2-4 lines, while editorial previews can sometimes start even shorter.

Use button labels that match the tone of the page. Read more is a safe default, but more contextual copy like Expand details or Show full policy can help when the content type is specific.

Contract scope

• Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior.
• Public import: @enadhq/enad-react-sdk/client/storefront.
• Playground route: /sandbox?component=TruncatedText.
• Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes