rc-text-ellipsis ui component for react
npm install rc-text-ellipsisReact TextEllipsis Component - A powerful and flexible text truncation component with expand/collapse functionality.
[![NPM version][npm-image]][npm-url]
[![build status][ci-image]][ci-url]
[![Test coverage][coveralls-image]][coveralls-url]
[![npm download][download-image]][download-url]
[npm-image]: http://img.shields.io/npm/v/rc-text-ellipsis.svg?style=flat-square
[npm-url]: http://npmjs.org/package/rc-text-ellipsis
[ci-image]: https://github.com/wulala0102/rc-text-ellipsis/workflows/CI/badge.svg
[ci-url]: https://github.com/wulala0102/rc-text-ellipsis/actions
[coveralls-image]: https://img.shields.io/coveralls/wulala0102/rc-text-ellipsis.svg?style=flat-square
[coveralls-url]: https://coveralls.io/r/wulala0102/rc-text-ellipsis?branch=main
[download-image]: https://img.shields.io/npm/dm/rc-text-ellipsis.svg?style=flat-square
[download-url]: https://npmjs.org/package/rc-text-ellipsis
- šÆ 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
š Live Demo - See all features in action!
``bash`
npm install rc-text-ellipsis --save
or
`bash`
yarn add rc-text-ellipsis
`tsx
import React from 'react';
import TextEllipsis from 'rc-text-ellipsis';
import 'rc-text-ellipsis/assets/index.css';
function App() {
return (
content="This is a very long text that needs to be truncated..."
expandText="Expand"
collapseText="Collapse"
/>
);
}
`
`tsx`
content="Your long text here..."
action={(expanded) => (
{expanded ? '[Fold]' : '[Unfold]'}
)}
/>
`tsx`
content="Your long text here..."
suffix={(expanded, isOverflow) => (
{isOverflow ? (expanded ? '[Collapse]' : '[Expand]') : '[Complete]'}
)}
/>
`tsx
import React, { useRef } from 'react';
import TextEllipsis, { TextEllipsisRef } from 'rc-text-ellipsis';
function App() {
const textEllipsisRef = useRef
const handleExpand = () => {
textEllipsisRef.current?.toggle(true);
};
return (
<>
rows={2}
content="Your long text here..."
expandText="Expand"
collapseText="Collapse"
/>
>
);
}
`
`tsx
// Ellipsis at the end (default)
rows={2}
content="Your text..."
/>
// Ellipsis at the start
rows={2}
content="Your text..."
/>
// Ellipsis in the middle
rows={2}
content="Your text..."
/>
`
The component supports two ways to display additional content:
: Current expand/collapse state
- isOverflow: Whether the text is truncated
- Perfect for status indicators, badges, or persistent actionsImportant:
action and suffix are mutually exclusive. If both are provided, suffix takes priority.`tsx
// Suffix shows different states
rows={2}
content={longText}
suffix={(expanded, isOverflow) => (
{isOverflow
? (expanded ? 'ā² Show Less' : 'ā¼ Show More')
: 'ā Complete'
}
)}
/>
`API
$3
| 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 |$3
| Method | Type | Description |
| --- | --- | --- |
| toggle |
(expanded?: boolean) => void | Programmatically toggle expand/collapse state |$3
`tsx
import TextEllipsis, {
TextEllipsisProps,
TextEllipsisRef
} from 'rc-text-ellipsis';
`
Development
`bash
Install dependencies
npm installStart development server
npm startVisit http://localhost:8000/examples/ to see examples
`Build
`bash
Build the component
npm run buildRun linter
npm run lint
`Test
`bash
Run tests
npm testRun tests in Chrome
npm run chrome-testGenerate coverage report
npm run coverage
``Modern browsers and IE11+
We welcome contributions! Please feel free to submit a Pull Request.
rc-text-ellipsis is released under the MIT license.