JSPM

react-text-trim

1.0.3
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 106
  • Score
    100M100P100Q73559F

Custimizable text trimmer for react

Package Exports

  • react-text-trim

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-text-trim) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-text-trim

Customizable text trimmer

NPM JavaScript Style Guide

Live Demo here

trimmer

Install

npm install --save react-text-trim

Usage

<TextTrim 
    refId="TextTrim"
    text="Lorem ipsum dolor sit amet, consecter adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
    minLines={2}
    maxLines={5}
    showMoreLabel="Show More"
    showLessLabel="Show Less"
    delimiter="..."
    fontSize={14}
    lineHeight={16}
    containerStyle={{}}
    textWrapperStyle={{}}
    buttonStyle={{}}
/>

Props

name type description default value
refId* string unique id for the component ---
text string the text to trim ---
minLines number the number of lines to show when trimmed 3
maxLines number the number of lines to display when text is not trimmed, if the text is longer it will be scrollable, to disable this prop and display the all text just pass 0 0
showMoreLabel string the label for the toggle element when text is trimmed "Show More"
showLessLabel string the label for the toggle element when text is not trimmed "Show Less"
delimiter string the suffix for the text "..."
fontSize number the font size of text (in pixels) 13
lineHeight number the height of each line (in pixels) 16
containerStyle object styles for the container element ---
textWrapperStyle object styles for the text wrapping container element ---
buttonStyle object styles for the toggle element ---

License

© NadavShaar