React-Truncate
Install
$ npm install react-truncate
Usage
; // ... { return <Truncate lines=3 ellipsis=<span>... <a href='/link/to/article'>Read more</a></span>> longText </Truncate> ; }
Hint: (Generally with React) if you want to preserve newlines from plain text, you need to do as follows:
//... text//...
API
Prop | Type | Default | Description | Example |
---|---|---|---|---|
lines | integer, boolean {false} | 1 | Specifies how many lines of text should be preserved until it gets truncated. false and any integer < 1 will result in the text not getting clipped at all. |
(false , -1 , 0 ), 1 , ... |
ellipsis | string, React node | '…' | An ellipsis that is added to the end of the text in case it is truncated. | '...' , <span>...</span> , <span>... <a href='#' onClick={someHandler}>Read more</a></span> , [<span key='some'>Some</span>, <span key='siblings'>siblings<span>] |
children | string, React node | The text to be truncated. Anything that can be evaluated as text. | 'Some text' , <p>Some paragraph <a/>with other text-based inline elements<a></p> , <span>Some</span><span>siblings</span> |
|
onTruncate | function | Gets invoked on each render. Gets called with true when text got truncated and ellipsis was injected, and with false otherwise. |
isTruncated => isTruncated !== this.state.isTruncated && this.setState({ isTruncated }) |
Known issues
- Text exceeding horizontal boundaries when "viewport" meta tag is not set accordingly for mobile devices (font boosting leads to wrong calculations). See issue
- Output in plain text only - no support for markup/HTML. See issue
- Wrong line breaks when custom font is loading after the component has rendered. See issue
Integrated example for toggling "read more" text
;;; { super...args; thisstate = expanded: false truncated: false ; thishandleTruncate = thishandleTruncate; thistoggleLines = thistoggleLines; } { if thisstatetruncated !== truncated this; } { event; this; } { const children more less lines } = thisprops; const expanded truncated = thisstate; return <div> <Truncate lines=!expanded && lines ellipsis= <span>... <a href='#' onClick=thistoggleLines>more</a></span> onTruncate=thishandleTruncate > children </Truncate> !truncated && expanded && <span> <a href='#' onClick=thistoggleLines>less</a></span> </div> ; }} ReadMoredefaultProps = lines: 3 more: 'Read more' less: 'Show less'; ReadMorepropTypes = children: PropTypesnodeisRequired text: PropTypesnode lines: PropTypesnumber; ;
Developing
Install system libraries needed for development dependencies
Install development dependencies
$ npm install
Run tests
$ npm test
Run code linter
$ npm run lint
Compile to ES5 from /src to /lib
$ npm run compile