Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

react-read-more-read-less

giatro5.3kISC1.0.7

Highly customizable React component that displays truncated text with "read more" and "read" less links

react, long text, read more, read less

readme

React Read More Read Less

NPM npm version license-isc

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"}