use-truncate-from-middle v1.2.0

Truncate From Middle Hook

This react hook dynamically truncates text from the middle

Demo

🚀 See Demo:

Installation

yarn add use-truncate-from-middle

or

npm install use-truncate-from-middle

Usage

import { useTruncateFromMiddle } from 'use-truncate-from-middle';

const Textarea = ({
  originalLongText = 'very long longer text button',
  width = '128px', // width (total)= content width + border width + padding
  font = '18px/18px Arial, sans-serif',
}) => {
  const btnRef = React.useRef(null);

  const { truncatedText, contentWidth } = useTruncateFromMiddle({
    ref: btnRef,
    originalText: originalLongText || '',
    middleChars: '...',
  });

  return (
    <>
      <textarea
        ref={btnRef}
        rows={1}
        style={{ width: width, font: font }}
        value={truncatedText}
        readOnly
      />
    </>
  );
};

Props