@caseykey/react-read-more-read-less

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

Usage no npm install needed!

<script type="module">
  import caseykeyReactReadMoreReadLess from 'https://cdn.skypack.dev/@caseykey/react-read-more-read-less';
</script>

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