React component for truncating multi-line spans and adding an ellipsis
npm install react-read-more
npm install react-read-more
`
Usage
`js
import {Truncate} from 'react-read-more';
// ...
class Foo extends Component {
render() {
return (
... Read more}>
{longText}
);
}
}
`
`js
import {ReadMore} from 'react-read-more';
// ...
class Foo extends Component {
render() {
return (
{longText}
);
}
}
`
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. | '...', ..., ... Read more, [Some, siblings]
| children | string, React node | | The text to be truncated. Anything that can be evaluated as text. | 'Some text', Some paragraph with other text-based inline elements
, Somesiblings |
| 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 }) |
Developing
Install system libraries needed for development dependencies
- https://github.com/Automattic/node-canvas#installation
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
``