Flexible Multi-line Text Truncation Hook – use-clamp-text

use-clamp-text is a React hook that truncates long text to a specific number of lines. Flexible, configurable, and fully responsive.

How to use it:

1. Installation.

# Yarn
$ yarn add use-clamp-text

# NPM
$ npm i use-clamp-text

2. Import the use-clamp-text hook.

import { useState } from "react";
import { useClampText } from "use-clamp-text";

3. Basic usage.

const longText = "Long Text Here";
function ClampedText {
const [ref, { noClamp, clampedText }] = useClampText({
  text: longText,
});
  return (
    <section>
      <h1>
        {noClamp ? 'Not truncated' : 'Truncated'}
      </h1>
      <div ref={ref}>
        {clampedText}
      </div>
    </section>
  );
}

4. Available configs.

interface ClampTextConfig {
  text: string;
  ellipsis: string | number;
  lines?: number;
  expanded?: boolean;
  debounceTime?: number;
  charWidth?: number;
}

Preview:

Download Details:

Author: drenther

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/drenther/use-clamp-text

License: MIT