Neutrino Packing Machine

    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

    Install

    npm i use-truncate-from-middle

    DownloadsWeekly Downloads

    7

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    20.8 kB

    Total Files

    13

    Last publish

    Collaborators

    • defne