Nothing's plumb meaningless
    Have ideas to improve npm?Join in the discussion! »

    react-string-clamp

    0.3.1 • Public • Published

    react-string-clamp

    Licence Downloads Build Status

    react-string-clamp component is on the left. On the right is a regular div. Lines property is equal to 2, other optional props is unset (default values are used). Powered by CSS animations.

    Main features:

    • Easy to use - only one required property and 2-3 optional will cover most of use cases.
    • Automatically runs re-render if component size changed.
    • Supports reverse clamping.
    • Allows you to add any custom css-styles (inline or via className).
    • Supports any kind of string splitting rules (words, letters, dashes, etc.).
    • Deletes punctuation characters before adding ellipsis.
    • FPS limitation.
    • Wide range of another optional settings.

    Installation

    With NPM:

    npm install react-string-clamp --save
    

    or using YARN:

    yarn add react-string-clamp
    

    Usage

    Import TextClamp component.

    import TextClamp from 'react-string-clamp';
    

    Add TextClamp component to your code.

    <TextClamp
      text="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
      ... // optional props
      />
    

    Recommendation!

    To prevent unexpected behaviors, do not use this component inside elements which width depends on inner content width (any inline element usually grows up as content becomes bigger). Version 0.2.0 (and higher) has some fixes intended to avoid problems (by stretching element to the full available width), but it would be better not to use this component is a such way.

    Optional props

    • styles - object of inline-styles. Default: {}.

    • className - class attribute.

    • lines - maximum number of lines. Default: 1.

    • maxFPS - frames per second limit. null, false, undefined and value lower than 1 will disable this feature. Default: undefined.

    • ellipsis - ellipsis. Default: "...".

    • reverse - boolean. If enabled text will be clamped from the other side. Default: false.

    • gap - sets tolerance in range from 0 to 1. Default: 0.01.

    • splitter - string. Sets rule of text splitting to unbreakable chunks. Default: " " (space).

    • element - HTML-tag name. Default: "div".

    • onClick - onClick callback. Default: () => null.

    • punctuation - boolean. If enabled function will delete punctuation chars before adding ellipsis. Default: true.

    • punctuationChars - array. Allows to set your own array of punctuation chars array. Default: ',', '/', '\\', '&', '.', '-', '!', '?', ' ', ';', ':', Enter and Tabulation.

    • punctuaionCharsAdditional - array. Allows you to set additional punctuation chars array. Default: [].

    License

      MIT

    Install

    npm i react-string-clamp

    DownloadsWeekly Downloads

    888

    Version

    0.3.1

    License

    MIT

    Unpacked Size

    4.92 MB

    Total Files

    14

    Last publish

    Collaborators

    • avatar