• Stars
    star
    174
  • Rank 219,104 (Top 5 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 2 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

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:

property type required default description
text string true Text you wish to clamp
ellipsis string | number false 'โ€ฆ' 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>)
expanded boolean false false To control whether the string should be truncated or not
lines number false 3 Number of visible lines
debounce number false 300 Time in milliseconds used for debounce
charWidth number false 1.2 Character 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
property type description
noClamp boolean Whether the text is clamped or not. Will return true if not clamped
clampedText string The string to be rendered
key string A 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)

More Repositories

1

js-design-patterns

This repo contains all the examples for my javascript design pattern article.
JavaScript
283
star
2

flashtext.js

A JavaScript Port of the Python package FlashText @ https://github.com/vi3k6i5/flashtext
JavaScript
74
star
3

upi_pay

Flutter plugin for UPI (Only in India)
Dart
58
star
4

next-pwa

A Simple Server-side rendered PWA with Next.js
CSS
55
star
5

react-osx-dock

JavaScript
9
star
6

use-custom-event

TypeScript
7
star
7

react-ssr

Source code for the "React Server Side Rendering from Scratch" article
JavaScript
7
star
8

bdnd_example

A simple drag and drop game made with React and react-beautiful-dnd
JavaScript
5
star
9

izod

type safe, validated, namespaced iframe communication made simple!
TypeScript
4
star
10

material-ui-confirmation

React hook to seamlessly use customizable confirmation dialogs from @material-ui/core without managing any open/close state
TypeScript
4
star
11

array-move-slice

A tiny utility to move a slice of an array from one starting index to another within the same array
TypeScript
3
star
12

graphql-apollo-express-jwt-auth

JavaScript
3
star
13

random-people-sc-example

Source code for the "Styling React with styled-components" article
JavaScript
3
star
14

localVideoPlayer

HTML5 Local Video Player with some cool features and keyboard functionality
JavaScript
2
star
15

advent-of-code-solutions

TypeScript
2
star
16

parcel-starter

HTML
1
star
17

silence_mp3

1
star
18

webCam

Webcam filter experimentation app
JavaScript
1
star
19

curriculum-server

1
star
20

canvasFun

Playing with HTML5 Canvas
JavaScript
1
star
21

able-webhook-handler

JavaScript
1
star
22

delhiquor

An app to show retail prices for liquor in Delhi
JavaScript
1
star
23

dev-extension

JavaScript
1
star
24

able-gatsby-starter

JavaScript
1
star
25

youtube-thumbnail-proxy

JavaScript
1
star
26

express-rest-template

JavaScript
1
star
27

surya-bio-demo

TypeScript
1
star
28

react-page-visibility-example

Created with CodeSandbox
JavaScript
1
star
29

easy-stats-webpack-plugin

Webpack build stats plugin with granular control, transform function and custom stats generation.
JavaScript
1
star
30

alpine-curl-zip

Dockerfile
1
star
31

calculator

for freeCodeCamp Front End Certificate
JavaScript
1
star
32

backend

1
star
33

mern-transaction-starter

This is a fullstack MERN application template with MongoDB Transactions in mind.
JavaScript
1
star
34

banker

For the lack of a better name - Banker
JavaScript
1
star
35

hw-react-challenge

React based solution to the Hackerearth front-end challenge
JavaScript
1
star