use-truncate-from-middle
TypeScript icon, indicating that this package has built-in type declarations

1.2.0 • Public • Published

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
      />
    </>
  );
};
Truncated from middle with given parameters

truncate middle ss

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

/use-truncate-from-middle/

    Package Sidebar

    Install

    npm i use-truncate-from-middle

    Weekly Downloads

    153

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    20.8 kB

    Total Files

    13

    Last publish

    Collaborators

    • defne