use-clamp-text hook: useClampText

Custom react hook that clamp multiline text to a specified line number. Can optionally specify trailing spaces. Fix some bugs and use cleaner implementation. Modified from:

• https://github.com/drenther/use-clamp-text/blob/main/src/index.ts
• https://github.com/zoltantothcom/react-clamp-lines/blob/master/src/index.js

Install

npm i @yukimoto/use-clamp-text

Usage

const component = () => {
  const {
    longEnoughToClamp,
    textContainerRef,
    addOnsContainerRef,
    wrapperContainerRef,
    clamped,
    clampedText,
    toggleClamp,
  } = useClampText<{
    WrapperContainer: HTMLDivElement;
    TextContainer: HTMLSpanElement;
    AddonsContainer: HTMLButtonElement;
  }>({
    originalText: 'some potentially really long text...',
    lines: 2, // At most how many lines
    endSpaceNumber: 4, // how many trailing space,
    unitSpaceChar: '*', // single trailing space should be the width of this char
    debounceTime: 100, // in miliseconds
  });
  return (
    <div ref={wrapperContainerRef}>
      <span ref={textContainerRef}>{clampedText}</span>
      {longEnoughToClamp ? (
        <button ref={addOnsContainerRef} onClick={toggleClamp}>
          {clamped ? '...show more' : '...show less'}
        </button>
      ) : null}
    </div>
  );
};

API reference

Arguments

property	type	required	default	description
originalText	string	false	''	Text you wish to clamp.
lines	number	false	2	Number of visible lines when collapsed.
debounceTime	number	false	300	How many time in miliseconds before the clamp action will be triggered when window resizes.
minSpaceCharNum	number	false	0	The minium trailing space number, will make the process of adding space to the end of the addons component more efficient.
unitSpaceChar	string	false	'.'	The width of single trailing space, pass a char for the measurement of width.
endSpaceNumber	number	false	0	How many trailing spaces. Each of them will be the width of unitSpaceChar.

Returns

property	type	description
longEnoughtToClamp	boolean	Whether the originalText is longer enough to exceeds the given line number by it self.
clampedText	string	The string to be rendered.
clamped	boolean	A state indicating whether the text should be clamped if long enough.
toggleClamp	() => void	A callback which togger the clamped state.
wrapperContainerRef, textContainerRef, addOnsContainerRef	React.RefObject<E extends HTMLElement>	Ref for corresponding containers.