Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

use-clamp-text

Package Overview
Dependencies
Maintainers
1
Versions
4
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

use-clamp-text

react hook to clamp multiline text to a given height in a responsive way (in < 2.5kb)

  • 1.1.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

use-clamp-text

Bundle Size npm version npm downloads types visitor badge

react hook to clamp multiline text to a given height in a responsive way and with extreme flexibility (under 2.5kb)

Line Clampin’ (Truncating Multiple Line Text) is a major hassle still for most browsers.

This tiny react hook eases that pain.

Why hook?

Cause it gives extreme flexibility over how you want to control the text. Do you want truncate it or not? When to truncate it? How to show read more interactions? and more...

Usage

Basic Example

import { useClampText } from 'use-clamp-text';

const longText = "Spicy jalapeno bacon ipsum dolor amet drumstick sirloin chuck shankle. Flank ribeye pancetta andouille ham hock. Turkey cow tenderloin landjaeger filet mignon hamburger. Pig tail strip steak pastrami t-bone venison bresaola biltong corned beef drumstick pork hamburger tri-tip. Tongue ham hock corned beef tri-tip meatball t-bone fatback andouille sirloin chuck jowl biltong pastrami. Ham hock ground round landjaeger tail strip steak. Ham sirloin pork loin salami spare ribs. Jerky cow short ribs ground round. Hamburger porchetta shankle meatloaf shank.";

function ClampedText {
const [ref, { noClamp, clampedText }] = useClampText({
  text: longText,
});

  return (
    <section>
      <h1>
        {noClamp ? 'Not truncated' : 'Truncated'}
      </h1>
      <div ref={ref}>
        {clampedText}
      </div>
    </section>
  );
}

Advanced Example

Check out the codesandbox example

API Reference

Arguments

The hook accepts only a single object argument is accepted with the following properties:

propertytyperequireddefaultdescription
textstringtrueText you wish to clamp
ellipsisstring | numberfalse'…'String displayed after the clamped text or number of characters to be trimmed off the string (useful for adding inline custom ellipsis like a <a> or <button>)
expandedbooleanfalsefalseTo control whether the string should be truncated or not
linesnumberfalse3Number of visible lines
debouncenumberfalse300Time in milliseconds used for debounce
charWidthnumberfalse1.2Character width to be assumed for calculating clamped string length (an average depending on your font size should work well enough)

Return

The hook returns a tuple -

  • [0] (first element) - React.MutableRefObject<HTMLElement | null> - a ref to attach to the element where the clamped text will be rendered
  • [1] (second element) - Object - The properties of the object are documented in the table below
propertytypedescription
noClampbooleanWhether the text is clamped or not. Will return true if not clamped
clampedTextstringThe string to be rendered
keystringA key to attach to the element that contains the string to be rendered (only needed when using custom inline ellipsis)

Prior Art (packages I copied adapted code from)

Keywords

FAQs

Package last updated on 09 May 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc