react-read-more-read-less

Install

npm install react-read-more-read-less --save

Usage

import ReactReadMoreReadLess from "react-read-more-read-less";

class myComponent extends Component {
    render() {
        return (
            <ReactReadMoreReadLess
                charLimit={200}
                readMoreText={"Read more ▼"}
                readLessText={"Read less ▲"}
            >
                {myLongText}
            </ReactReadMoreReadLess>
        );
    }
}

Test on CodeSandbox

PROPTYPES

| Prop | Type | Default | | ---- | ---- | ------- | | charLimit | integer | 150 | | ellipsis | String | … | | readMoreText | String | Read more | | readLessText | String | Read less | | readMoreClassName | String | react-read-more-read-less react-read-more-read-less-more | | readLessClassName | String | react-read-more-read-less react-read-more-read-less-less | | readMoreStyle | object | {whiteSpace: "nowrap", textDecoration: "none"} | | readLessStyle | object | {whiteSpace: "nowrap", textDecoration: "none"} |