README
React Show More Text
The text surrounded by the component will be truncated. Anything surrounded by the component could be evaluated as text. The component react-show-more-text/ShowMoreText is fork of react-show-more/ShowMore, applied improvements, works with React 16.x.x, added onClick event.
Demo
https://www.devzonetech.com/demo/react-show-more-text/build/
Install
$ npm install react-show-more-text
Usage
import ShowMoreText from 'react-show-more-text';
// ...
class Foo extends Component {
executeOnClick(isExpanded) {
console.log(isExpanded);
}
render() {
return (
<ShowMoreText
{* Default options *}
lines={3}
more='Show more'
less='Show less'
anchorClass=''
onClick={this.executeOnClick}
expanded={false}
>
{longText}
</ShowMoreText>
);
}
}
API
Prop | Type | Default | Description | Example |
---|---|---|---|---|
lines | integer, boolean {false} | 3 | 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 , ... |
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> |
|
more | string, React node | 'Show more' | The text to display in the anchor element to show more. | 'Show more' , <span>Show more</span> |
less | string, React node | 'Show less' | The text to display in the anchor element to show less. | 'Show less' , <span>Show less</span> |
anchorClass | string | '' | Class name(s) to add to the anchor elements. | 'my-anchor-class' , 'class-1 class-2' |
onClick | Function | Function executed on click on 'Show more' or 'Show less' | onClick={this.executeOnClick} |
|
expanded | boolean | 'false' | Control the text to be shown as expanded | expanded={true} |
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