rc-text-ellipsis

React TextEllipsis Component - A powerful and flexible text truncation component with expand/collapse functionality.

Features

• 🎯 Multi-line text truncation with precise control
• 📍 Three ellipsis positions: start, middle, end
• 🔄 Expand/collapse functionality
• 🎨 Customizable action buttons
• 📱 Responsive - auto-recalculates on window resize
• 🎛️ Imperative API via ref
• 💪 TypeScript support
• ⚡ Efficient binary search algorithm

Demo

🚀 Live Demo - See all features in action!

Installation

npm install rc-text-ellipsis --save

or

yarn add rc-text-ellipsis

Usage

Basic Example

import React from 'react';
import TextEllipsis from 'rc-text-ellipsis';
import 'rc-text-ellipsis/assets/index.css';

function App() {
  return (
    <TextEllipsis
      rows={3}
      content="This is a very long text that needs to be truncated..."
      expandText="Expand"
      collapseText="Collapse"
    />
  );
}

With Custom Action Button

<TextEllipsis
  rows={2}
  content="Your long text here..."
  action={(expanded) => (
    <span style={{ color: 'red', fontWeight: 'bold' }}>
      {expanded ? '[Fold]' : '[Unfold]'}
    </span>
  )}
/>

With Suffix (Always Visible)

<TextEllipsis
  rows={2}
  content="Your long text here..."
  suffix={(expanded, isOverflow) => (
    <span style={{ color: 'blue', marginLeft: '4px' }}>
      {isOverflow ? (expanded ? '[Collapse]' : '[Expand]') : '[Complete]'}
    </span>
  )}
/>

Using Ref for External Control

import React, { useRef } from 'react';
import TextEllipsis, { TextEllipsisRef } from 'rc-text-ellipsis';

function App() {
  const textEllipsisRef = useRef<TextEllipsisRef>(null);

  const handleExpand = () => {
    textEllipsisRef.current?.toggle(true);
  };

  return (
    <>
      <TextEllipsis
        ref={textEllipsisRef}
        rows={2}
        content="Your long text here..."
        expandText="Expand"
        collapseText="Collapse"
      />
      <button onClick={handleExpand}>Expand from outside</button>
    </>
  );
}

Different Ellipsis Positions

// Ellipsis at the end (default)
<TextEllipsis
  position="end"
  rows={2}
  content="Your text..."
/>

// Ellipsis at the start
<TextEllipsis
  position="start"
  rows={2}
  content="Your text..."
/>

// Ellipsis in the middle
<TextEllipsis
  position="middle"
  rows={2}
  content="Your text..."
/>

Suffix vs Action

The component supports two ways to display additional content:

Action Button

• Only visible when text is truncated
• Disappears when text doesn't overflow
• Used for expand/collapse functionality

Suffix

• Always visible, regardless of text overflow
• Receives two parameters:
  • expanded: Current expand/collapse state
  • isOverflow: Whether the text is truncated
• Perfect for status indicators, badges, or persistent actions

Important: action and suffix are mutually exclusive. If both are provided, suffix takes priority.

// Suffix shows different states
<TextEllipsis
  rows={2}
  content={longText}
  suffix={(expanded, isOverflow) => (
    <span style={{ color: isOverflow ? 'orange' : 'green' }}>
      {isOverflow
        ? (expanded ? '▲ Show Less' : '▼ Show More')
        : '✓ Complete'
      }
    </span>
  )}
/>

API

Props

| Property | Type | Default | Description | | --- | --- | --- | --- | | className | string | - | Additional CSS class for the root element | | style | React.CSSProperties | - | Inline styles for the root element | | rows | number | 1 | Number of lines to display before truncating | | dots | string | '...' | The ellipsis text to show when truncated | | content | string | '' | The text content to display | | expandText | string | '' | Text for the expand action button | | collapseText | string | '' | Text for the collapse action button | | position | 'start' \| 'middle' \| 'end' | 'end' | Position of the ellipsis | | onClickAction | (e: React.MouseEvent) => void | - | Callback when action button is clicked | | action | (expanded: boolean) => React.ReactNode | - | Custom render function for action button | | suffix | (expanded: boolean, isOverflow: boolean) => React.ReactNode | - | Custom render function for suffix (always visible). Mutually exclusive with action - if both are provided, suffix takes priority |

Ref Methods

| Method | Type | Description | | --- | --- | --- | | toggle | (expanded?: boolean) => void | Programmatically toggle expand/collapse state |

TypeScript Types

import TextEllipsis, {
  TextEllipsisProps,
  TextEllipsisRef
} from 'rc-text-ellipsis';

Development

# Install dependencies
npm install

# Start development server
npm start

# Visit http://localhost:8000/examples/ to see examples

Build

# Build the component
npm run build

# Run linter
npm run lint

Test

# Run tests
npm test

# Run tests in Chrome
npm run chrome-test

# Generate coverage report
npm run coverage

Browser Support

Modern browsers and IE11+

Contributing

We welcome contributions! Please feel free to submit a Pull Request.

License

rc-text-ellipsis is released under the MIT license.