thanhtoan1196 / react-read-more-read-less

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

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