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

| Prop | Type | Description | Default | | -------------- | -------- | ----------------------------------------------------------------------------------------------------------------- | ------- | | originalText | String | Initial text value of the component. It is going to be truncated from middle if necessary. | '' | | middleChars | String | The ellipsis to use when the text is truncated from middle. | '...' | | ref | Object | The ref of the text container component.It is required to calculate component's width and to get its font style | null |