Hidden

Overview

Truncates a string to a specified length and appends ellipsis (…) if the string exceeds the limit. Returns the original string if it’s within the specified length.

truncate(/str/, /num/);

Features

• Truncates strings to specified character length
• Automatically appends ellipsis (…) when truncated
• Returns original string if within limit
• Default length of 128 characters
• Returns empty string for non-string inputs
• Simple and intuitive API
• No side effects - does not modify original string
• Comprehensive testing

Arguments

Arg	Type	Default Value	Required
str	string	-	Yes
num	number	128	No

Usage

Use the truncate() function to truncate strings to a specified length.

import { truncate } from '@inpulse-ui/utils';

const longText = 'This is a very long string that needs to be truncated';
const result = truncate(longText, 20);
console.log(result); // "This is a very long ..."

Using default length (128 characters):

const text = 'Short text';
const result = truncate(text);
console.log(result); // "Short text" (no truncation needed)

const veryLongText = 'A'.repeat(150);
const truncated = truncate(veryLongText);
console.log(truncated.length); // 131 (128 + 3 for ellipsis)

Returns original string if within limit:

console.log(truncate('Hello', 10)); // "Hello"
console.log(truncate('Short text', 50)); // "Short text"
console.log(truncate('Exactly 10', 10)); // "Exactly 10"

Returns empty string for invalid inputs:

console.log(truncate(null)); // ""
console.log(truncate(undefined)); // ""
console.log(truncate(123)); // ""
console.log(truncate({})); // ""

Different truncation lengths:

const text = 'The quick brown fox jumps over the lazy dog';

console.log(truncate(text, 10)); // "The quick ..."
console.log(truncate(text, 20)); // "The quick brown fox ..."
console.log(truncate(text, 30)); // "The quick brown fox jumps over..."
console.log(truncate(text, 50)); // "The quick brown fox jumps over the lazy dog"

Examples

Product listing - creating consistent product descriptions for grid layouts:

import { truncate } from '@inpulse-ui/utils';

// Product data with varying description lengths
const products = [
  {
    id: 1,
    name: 'Wireless Headphones',
    description: 'Premium wireless headphones with noise cancellation, 30-hour battery life, and superior sound quality. Perfect for music lovers and professionals who demand the best audio experience.',
    price: 199.99
  },
  {
    id: 2,
    name: 'Smartphone',
    description: 'Latest flagship smartphone featuring a powerful processor, advanced camera system, and all-day battery life.',
    price: 899.99
  },
  {
    id: 3,
    name: 'Laptop',
    description: 'High-performance laptop designed for professionals and creators. Features include a stunning display, fast SSD storage, and exceptional build quality.',
    price: 1299.99
  }
];

// Create consistent product cards with truncated descriptions
const productCards = products.map(product => ({
  ...product,
  shortDescription: truncate(product.description, 80),
  cardDescription: truncate(product.description, 120)
}));

console.log(productCards);
// [
//   {
//     id: 1,
//     name: 'Wireless Headphones',
//     description: 'Premium wireless headphones...',
//     shortDescription: 'Premium wireless headphones with noise cancellation, 30-hour battery life,...',
//     cardDescription: 'Premium wireless headphones with noise cancellation, 30-hour battery life, and superior sound quality. Perfect...',
//     price: 199.99
//   },
//   // ... other products with consistent description lengths
// ]

// Use in UI components
productCards.forEach(product => {
  console.log(`${product.name}: ${product.shortDescription}`);
});

Article excerpt generation:

const articles = [
  {
    title: 'Getting Started with React',
    content: 'React is a popular JavaScript library for building user interfaces. It was created by Facebook and has become one of the most widely used frontend frameworks in the world.'
  },
  {
    title: 'Advanced JavaScript Concepts',
    content: 'JavaScript is a versatile programming language that powers modern web development. Understanding advanced concepts like closures, promises, and async/await is crucial for building robust applications.'
  }
];

const excerpts = articles.map(article => ({
  ...article,
  excerpt: truncate(article.content, 100)
}));

console.log(excerpts);
// [
//   {
//     title: 'Getting Started with React',
//     content: 'React is a popular...',
//     excerpt: 'React is a popular JavaScript library for building user interfaces. It was created by Facebook...'
//   },
//   {
//     title: 'Advanced JavaScript Concepts',
//     content: 'JavaScript is a versatile...',
//     excerpt: 'JavaScript is a versatile programming language that powers modern web development. Understanding...'
//   }
// ]

User comment display:

const comments = [
  'This is an amazing article! I learned so much from reading it.',
  'Great explanation of the concepts. Very helpful for beginners.',
  'I have been working with this technology for years and this article still taught me something new. The examples are clear and the explanations are thorough.'
];

const displayComments = comments.map(comment => truncate(comment, 60));
console.log(displayComments);
// [
//   'This is an amazing article! I learned so much from reading...',
//   'Great explanation of the concepts. Very helpful for beginners.',
//   'I have been working with this technology for years and this...'
// ]

Social media post preview:

const posts = [
  'Just finished reading an incredible book about software engineering practices. The insights on clean code and testing strategies will definitely improve my development workflow.',
  'Beautiful sunset today!',
  'Working on a new project using the latest web technologies. The developer experience has improved so much over the years.'
];

// Twitter-like character limit
const twitterPreviews = posts.map(post => truncate(post, 140));
console.log(twitterPreviews);
// [
//   'Just finished reading an incredible book about software engineering practices. The insights on clean code and testing strategies...',
//   'Beautiful sunset today!',
//   'Working on a new project using the latest web technologies. The developer experience has improved so much over the years.'
// ]