Pixel-width-truncate

This package dynamically measures text width by rendering it within a temporary, invisible DOM element. This approach allows for precise fitting of text within components of arbitrary width, with minimal performance impact due to the logarithmic complexity of the binary search.

Installation

This is a Node.js package available through the npm registry.

npm i pixel-width-truncate;

Usage

After installing, Import the like how normally we do

import truncateTextComponentWidth from "pixel-width-truncate";

Usage guidelines

• First argument will take string that will render on the DOM.
• width Of the Component can be string or number value of the component/element width.
• Don't user percentage values.
• The third argument is delimiter, the default delimiter is ‘…’ If user needs to other characters as delimiter then he can send has third argument.
• The function uses DOM manipulation to measure the string width. So, DOM is necessary to use this code.

import truncateTextComponentWidth from "pixel-width-truncate";

const truncateComponent = () => {
  const myString = "This is a long string that needs to be truncated.";
  const maxWidth = 100;
  const truncatedString = truncateTextComponentWidth(myString, maxWidth);

  return <div>{truncatedString}</div>;
};

export default truncateComponent;

Benifits

• The code uses parseInt to convert the component pixel value to an integer, ensuring it's treated as a number for width calculations.

• It employs a binary search approach to find the longest substring that fits within the component width. This method is more efficient than iterating through every character in the string.

• The function allows for a customizable delimiter (delimiter parameter) to be used for truncation, making it versatile for different display scenarios.

• The code attempts to add a character after a potential fit if the component width allows it, providing a more visually pleasing truncation point in some cases.