React component for truncating multi-line spans and adding an ellipsis
npm install react-show-moreThis is a convenience wrapper around react-truncate.
$ npm install react-show-more
Usage
js
import ShowMore from 'react-show-more';// ...
class Foo extends Component {
render() {
return (
lines={3}
more='Show more'
less='Show less'
anchorClass=''
>
{longText}
);
}
}
`API
| Prop | Type | Default | Description | Example |
| ---- | ---- | ------- | ----------- | ------- |
| lines | integer, boolean {false} | 3 | Specifies how many lines of text should be preserved until it gets truncated. and any integer < 1 will result in the text not getting clipped at all. | (false, -1, 0), 1, ... |
| 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 |
| more | string, React node | 'Show more' | The text to display in the anchor element to show more. | 'Show more', Show more
| less | string, React node | 'Show less' | The text to display in the anchor element to show less. | , Show less
| anchorClass | string | '' | Class name(s) to add to the anchor elements. | , 'class-1 class-2'Developing
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
[npm-url]: https://npmjs.org/package/react-show-more
[downloads-image]: http://img.shields.io/npm/dm/react-show-more.svg
[npm-image]: https://badge.fury.io/js/react-show-more.svg
[travis-url]: https://travis-ci.org/One-com/react-show-more
[travis-image]: http://img.shields.io/travis/One-com/react-show-more.svg
[coveralls-url]:https://coveralls.io/r/One-com/react-show-more
[coveralls-image]:https://coveralls.io/repos/One-com/react-show-more/badge.svg
[david-dm-url]:https://david-dm.org/One-com/react-show-more
[david-dm-image]:https://david-dm.org/One-com/react-show-more.svg
[david-dm-dev-url]:https://david-dm.org/One-com/react-show-more#info=devDependencies
[david-dm-dev-image]:https://david-dm.org/One-com/react-show-more/dev-status.svg