Skip to content

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

License

Notifications You must be signed in to change notification settings

giatro/react-read-more-read-less

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published