React component for truncating multi-line spans and adding an ellipsis
npm install react-truncate
$ npm install react-truncate
Usage
js
import Truncate from 'react-truncate';// ...
class Foo extends Component {
render() {
return (
... Read more}>
{longText}
);
}
}
`Hint: (Generally with React) if you want to preserve newlines from plain text, you need to do as follows:
js
//...
{text.split('\n').map((line, i, arr) => {
const line = {line}; if (i === arr.length - 1) {
return line;
} else {
return [line,
];
}
})}
//...
`API
| Prop | Type | Default | Description | Example |
| ---- | ---- | ------- | ----------- | ------- |
| lines | integer, boolean {false} | | 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 paragraph with other text-based inline elements
, Somesiblings |
| trimWhitespace | boolean | false | If true, whitespace will be removed from before the ellipsis (e.g. words ... will become words... instead) | |
| width | number | 0 | If not 0, the calculation of the content will be based on this number. | |
| 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
- Resize content when the size of parent container changed (use the width property or call ref.onResize()). See issue
- 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
- No support for letter spacing / word spacing. See issueIntegrated example for toggling "read more" text
`js
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Truncate from 'react-truncate';class ReadMore extends Component {
constructor(...args) {
super(...args);
this.state = {
expanded: false,
truncated: false
};
this.handleTruncate = this.handleTruncate.bind(this);
this.toggleLines = this.toggleLines.bind(this);
}
handleTruncate(truncated) {
if (this.state.truncated !== truncated) {
this.setState({
truncated
});
}
}
toggleLines(event) {
event.preventDefault();
this.setState({
expanded: !this.state.expanded
});
}
render() {
const {
children,
more,
less,
lines
} = this.props;
const {
expanded,
truncated
} = this.state;
return (
ellipsis={(
... {more}
)}
onTruncate={this.handleTruncate}
>
{children}
{!truncated && expanded && (
{less}
)}
);
}
}ReadMore.defaultProps = {
lines: 3,
more: 'Read more',
less: 'Show less'
};
ReadMore.propTypes = {
children: PropTypes.node.isRequired,
lines: PropTypes.number,
less: PropTypes.string,
more: PropTypes.string
};
export default ReadMore;
`Developing
Install system libraries needed for development dependencies
- https://github.com/Automattic/node-canvas#installationInstall 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-truncate
[downloads-image]:http://img.shields.io/npm/dm/react-truncate.svg
[npm-image]:https://badge.fury.io/js/react-truncate.svg
[travis-url]:https://travis-ci.org/One-com/react-truncate
[travis-image]:https://travis-ci.org/One-com/react-truncate.svg?branch=master
[coveralls-url]:https://coveralls.io/r/One-com/react-truncate
[coveralls-image]:https://coveralls.io/repos/One-com/react-truncate/badge.svg
[david-dm-url]:https://david-dm.org/One-com/react-truncate
[david-dm-image]:https://david-dm.org/One-com/react-truncate.svg
[david-dm-dev-url]:https://david-dm.org/One-com/react-truncate#info=devDependencies
[david-dm-dev-image]:https://david-dm.org/One-com/react-truncate/dev-status.svg