feat: add useExpandableText hook (character + line budget)

[devsaifmohamed]

useExpandableText — hook #41

Collapse long text behind a show-more toggle, capping by a character budget, a line budget, or both — whichever clips first wins. The two limits cover each other's blind spots:

• maxChars — pure string logic: SSR-safe and yields a genuinely shortened string (trimmed to a word boundary + ellipsis).
• maxLines — CSS -webkit-line-clamp measured with a ResizeObserver, so it re-clips as the container narrows.
• both — the string is capped and the element is clamped; isTruncated is true if either would clip.

const { text, isExpanded, isTruncated, toggle, ref, clampStyle } =
  useExpandableText<HTMLParagraphElement>(body, { maxChars: 180, maxLines: 3 });

<p ref={ref} style={clampStyle}>{text}</p>
{isTruncated && <button onClick={toggle}>{isExpanded ? "Show less" : "Show more"}</button>}

What's included

• Library: src/hooks/use-expandable-text/ (hook + colocated vitest test, 8 cases) + barrel + manifest entry (40 → 41); README/count regenerated from the manifest.
• Docs: doc-page entry (usage, API tables, type aliases), an interactive three-mode demo (chars / lines / both), and the vendored source snapshot.
• Brand: banner hook-count pill re-rendered 40 → 41 HOOKS (SVG + 2× PNG, mirrored to public/).

SSR-safe, zero-dep, fully typed. Gate green (143 tests pass; lint + typecheck + build across both workspaces).

🤖 Generated with Claude Code

Summary by CodeRabbit

• New Features

  • Added the useExpandableText hook for collapsing long text by character count, line count, or both.
  • Added customizable ellipsis text and expanded/collapsed controls.
  • Added documentation, interactive examples, and usage guidance for the new hook.
  • Updated the hook catalog and package exports to include the new hook.

• Tests

  • Added coverage for character truncation, line clamping, custom ellipses, and expansion state behavior.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
hookli	Ready	Preview, Comment	Jul 17, 2026 4:52pm

[ecc-tools]

ECC bundle files are already tracked in this repository. Skipping generation of another bundle PR.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: c779dc0d-ac6d-4b6d-8c99-777f2fb9702f

📥 Commits

Reviewing files that changed from the base of the PR and between d92120b and 81e1694.

⛔ Files ignored due to path filters (4)

• apps/docs/public/hookli-banner.png is excluded by !**/*.png
• apps/docs/public/hookli-banner.svg is excluded by !**/*.svg
• assets/hookli-banner.png is excluded by !**/*.png
• assets/hookli-banner.svg is excluded by !**/*.svg

📒 Files selected for processing (10)

• README.md
• apps/docs/components/demos/use-expandable-text-demo.tsx
• apps/docs/lib/hook-docs.ts
• apps/docs/lib/hook-sources.ts
• packages/hookli/README.md
• packages/hookli/hooks.manifest.json
• packages/hookli/src/hooks/index.ts
• packages/hookli/src/hooks/use-expandable-text/index.ts
• packages/hookli/src/hooks/use-expandable-text/use-expandable-text.test.ts
• packages/hookli/src/hooks/use-expandable-text/use-expandable-text.ts

---

📝 Walkthrough

Walkthrough

Adds useExpandableText, a React hook that supports character and line clamping, expansion controls, DOM-based overflow detection, package exports, tests, manifest registration, and documentation with an interactive demo.

Changes

Expandable text hook

Layer / File(s)	Summary
Hook implementation and validation packages/hookli/src/hooks/use-expandable-text/*	Defines character and line-clamping options, expansion actions, resize-based truncation detection, returned styles, and tests for truncation and state transitions.
Package registration and exports packages/hookli/hooks.manifest.json, packages/hookli/src/hooks/*, packages/hookli/README.md	Registers useExpandableText, exports its module and types, and updates the package hook count and listing.
Documentation demo and registry apps/docs/components/demos/use-expandable-text-demo.tsx, apps/docs/lib/*, README.md	Adds the interactive demo, hook metadata, source snapshot, and repository hook listing.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant DocsDemo
  participant useExpandableText
  participant TextElement
  User->>DocsDemo: Select clamp mode
  DocsDemo->>useExpandableText: Pass text and options
  useExpandableText->>TextElement: Apply ref and clampStyle
  TextElement-->>useExpandableText: Measure rendered height
  useExpandableText-->>DocsDemo: Return text and truncation state
  DocsDemo-->>User: Render text and toggle control

Loading

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly names the new useExpandableText hook and its character/line budgeting behavior.
Description check	✅ Passed	It explains what the hook does, why it exists, and summarizes the key changes, though it doesn't follow the exact template headings.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/use-expandable-text

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install timed out. The project may have too many dependencies for the sandbox.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}