@dynamic-middle-ellipsis/react


React component to dynamically truncate long text in the middle. Preserves the most important parts of your text with smart, responsive, and pixel-perfect text truncation.

$3

!demo

Features

- 🚀 Smart Truncation: Truncates in the middle, preserving important start/end content
- 📱 Responsive: Automatically adapts to container width changes
- 🎯 Precise: Font-aware calculations prevent over/under truncation
- 🔧 Complex Layouts: Handles nested containers, parent element without width, shared siblings, padding, margins, etc.
- 📝 Multi-line Support: Wraps to multiple lines before truncating
- ⚡ Performance: O(log(n)) width calculations and no re-renders
- 🎨 Customizable: Custom ellipsis symbols and line limits
- 🏗️ TypeScript: Full TypeScript support with proper types
- ⚛️ React Optimized: Hooks-based with proper cleanup and context

Installation

``bash
npm install @dynamic-middle-ellipsis/react
`

Quick Start

`tsx
import createMiddleEllipsis from "@dynamic-middle-ellipsis/react";

const MiddleEllipsis = createMiddleEllipsis();

function App() {
return (

This text will truncate in the middle when space is limited

);
}
`

Examples

$3


`tsx

Very long file name that needs truncation.pdf

// Result: "Very long file na...cation.pdf"
`

$3

`tsx

Very long file name that needs truncation.pdf

// Result: "Very long file n[---]tion.pdf"
`

$3

`tsx

This text will wrap to 3 lines before truncating in the middle. You can customize however you like.

// Result:
// This text will wrap to 3
// lines bef...dle. You can
// customize however you like.
`

$3

`tsx


First long text that needs truncation


Second long text that also needs truncation


// Result: "First...tion" "Second...tion"
`

API Reference

$3

Creates a MiddleEllipsis component factory with optional configuration.

Parameters:
- config.customFontWidthMap?: FontWidthMap - Custom font family mapping for precise calculations.

Returns: MiddleEllipsis component with Span and BoundingDiv properties.

$3

React component for truncating text content.

Props:
- children: string - Text content to truncate (required)
- ellipsisSymbol?: string - Custom ellipsis symbol (default: "...")
- lineLimit?: number - Maximum lines before truncation (default: 1)
- ...rest - All standard HTML span props (className, style, onClick, etc.)




$3

Container component for multiple truncating elements that share available space.

Props:
- children: ReactNode[] - Child elements (MiddleEllipsis.Span components)
- ...rest - All standard HTML div props

Advanced Usage

$3

For pixel-perfect truncation across different browsers and fonts, you need to generate font width mapping for all the font-family in your website.

1. Create custom-font-family-map.ts file:
`tsx
import type { FontWidthMap } from "@lalit-rana/dynamic-middle-ellipsis";

const chromeFontWidthMap: FontWidthMap = {};
const firefoxFontWidthMap: FontWidthMap = {};

export const customFontWidthMap: FontWidthMap = {
...chrome,
...firefox,
};
`
2. Open your website in chrome.
3. Copy everything from generate-font-width-mapping and paste it in the browser console.
- This'll generate character widths mapping for all font-families in your project.
4. Copy the return object from the console and paste it against chromeFontWidthMap in custom-font-family-map.ts.
5. Repeat for Firefox.
6. Pass customFontWidthMap to createMiddleEllipsis:
`tsx
import createMiddleEllipsis from "@dynamic-middle-ellipsis/react";
import { customFontWidthMap } from "./custom-font-width-map";

const MiddleEllipsis = createMiddleEllipsis({
customFontWidthMap,
});
`




Performance Considerations

- Uses ResizeObserver for efficient resize detection
- Minimal re-renders - text updates happen directly in DOM
- O(log(n)) complexity for parent/ancestor div width calculations where n is number of nodes in subtree
- Automatic cleanup on component unmount
- Shared calculations when using BoundingDiv

Technology Support

- React 16.8+ (hooks support)
- Modern browsers with ResizeObserver
- TypeScript 4.0+ (for TypeScript users)

Related Packages

- @dynamic-middle-ellipsis/core` - Framework-agnostic core utilities

License

MIT © Lalit Rana