Todomir

Todomir / trunky

Public

Truncation utils for JS/React

10
0
100% credibility
Found Apr 03, 2026 at 10 stars -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
TypeScript
AI Summary

A React library that smartly truncates multi-line rich text while perfectly preserving inline formatting like bold, italics, code, and emojis.

How It Works

1
🔍 Discover Trunky

While building an app with long formatted text like bold words or links, you search for a smarter way to shorten it without messing up the styles.

2
🎮 Try the playground

Jump into the online demo to drag and resize boxes, watching text magically shorten while keeping bold, italics, and emojis perfect.

3
✨ Add to your app

With one easy step, bring this truncation magic into your own project so it works just like in the demo.

4
đź“ť Wrap your text

Place your long paragraph or file path inside the simple container tags, telling it how many lines to show.

5
🌟 See it truncate perfectly

Resize your screen or box, and watch the text cut off neatly at the right spot, preserving all formatting like strong bold or code snippets.

6
âž• Add show more button

Drop in a toggle button that expands to full text when clicked, making it user-friendly.

âś… Perfect text previews

Your app now shows clean, professional truncated text everywhere, delighting users with smooth expand and flawless styles.

Sign up to see the full architecture

5 more

Sign Up Free

Star Growth

See how this repo grew from 10 to 10 stars Sign Up Free
Repurpose This Repo

Repurpose is a Pro feature

Generate ready-to-use prompts for X threads, LinkedIn posts, blog posts, YouTube scripts, and more -- with full repo context baked in.

Unlock Repurpose
AI-Generated Review

What is trunky?

Trunky delivers grapheme-accurate truncation utils for JS/React apps in TypeScript, clamping multi-line rich text to a max line count while keeping inline markup like strong, em, code, or custom components intact at cut points. Drop in the React compound component—Truncate.Root, Content, Toggle—for end truncation (prefix + ellipsis) or middle (prefix + ellipsis + tail, great for file paths like workspace/design-system/.../sidebar.tsx). No CSS line-clamp hacks or DOM reflow; it measures via canvas for precise trunkierung across emojis, complex scripts, and pre-wrap lines.

Why is it gaining traction?

Unlike CSS hacks that orphan tags or split graphemes (bye-bye 👨‍👩‍👧‍👦), Trunky rebuilds markup cleanly post-truncation, with ResizeObserver auto-remeasuring on resize or font load. The framework-agnostic core pairs with React 19 for SSR-friendly client truncation, plus playground demos for instant testing trunking strategies. Devs dig the binary-search smarts maximizing visible content without layout thrashing.

Who should use this?

React frontend devs building UIs with text previews, file explorers, or card descriptions where truncation must preserve bold links or code snippets. Ideal for design systems needing consistent trunky kinder(koffer)-style path clamping or article teasers. Skip if plain text suffices—grab for rich JSX truncation in Next.js or Vite apps.

Verdict

Solid for niche rich-text truncation pains, with excellent docs, playground, and Vitest/Playwright tests, but 10 stars and 1.0% credibility signal early maturity—watch for adoption. Try the playground before committing; it's a trunking win if markup fidelity matters.

(198 words)

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.