react-truncatable-text

High-performing React component that truncates a long text.

Check the demo here: DEMO

Features

• ⏱ Smart Debouncing - In cases when it's needed will try to save the resource and turn on the debouncing.
• 💾 Smart Copy/Paste - Copying even truncated text will add the full text to the clipboard.
• 🔦 Smart Search - Even after truncating, text can be found by built-in browser search.
• 📝 TypeScript - Good for TypeScript projects.
• ⚡️ Performing better than native text-overflow - Rendering only when the component is in view and only when changes are necessary.

Installation

Install using Yarn

yarn add react-truncatable-text

or NPM:

npm install react-truncatable-text --save

Usage

The <TruncatableText /> can truncate any text that exceeds the length of its parent wrapper element.

import { TruncatableText } from 'react-truncatable-text';

export const Component = () => (
<div style={{width: '50'}}>
  <TruncatableText tailLength={3}>
    This text is quite lengthy and needs to be shortened to fit into its parent container!
  </TruncatableText>
</div>
);

Props

| Name | Type | Default | Attribute type | Description | | ---------------------- | --------------- | ------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------- | | children | string | undefined | Required | As a children, should be passed a plain string. | | tailLength | number | undefined | Required | The length of the non-truncating text. In other words, the last N characters of the line that should always be shown. | | title | string | '' | Optional | Text that appears as a hint on the hover of the original text | | className | string | '' | Optional | CSS class of the component's container. | | debounced | boolean | false | Optional | A boolean indicating whether should we enable smart debouncing or not. | | searchable | boolean | false | Optional | A boolean indicating whether should be enabled search in truncated text. |

Smart debouncing

The smart debouncing feature utilizes the Performance API to verify if a task is taking too long to calculate the text length and activate the debouncing mechanism.

Smart Copy/Paste

To select the entire text, simply double-click on the component. Even if the text has been shortened, copying it will still copy the full original text to your clipboard.

Smart search

To be able to find a search in the truncated text used the hidden attribute with the until-found value.

Important! Since the until-found has weak browser compatibility for non-supporting browsers it will use fallback based on the scroll behavior. It might cause appearing a scrollbar.

Performance

The component utilizes the Intersection Observer API to handle only the visible component, so you can have a lot of components on the page and no worry about the performance issues.

Resizing

To manage resizes, the component utilizes the ResizeObserver. It creates a single ResizeObserver instance for each component, which can be reused whenever feasible.

Canvas measureText API

For measuring text used the CanvasRenderingContext2D.measureText() method, that returns a TextMetrics object that contains information about the measured text.