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 Button = ({
  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 } = useTruncateFromMiddle({
    ref: btnRef,
    originalText: originalLongText || '',
    middleChars: '...',
  });

  return (
    <>
      <button ref={btnRef} style={{ width: width, font: font }}>
        {truncatedText}
      </button>
    </>
  );
};

Example : Button Text Truncated From Middle

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