more-less
This package can be used to collapse or expand your large content to the specified length mentioned in the configuration with a (Read more / Read less) link to toggle.
Installation
$ npm install more-less --save
Usage
// Import Package; // Set Configurationslet config = text:'I am going to get shrinked and expanded' // (required) Text that has to be collapse and expand on specified length shortTo:100 // (optional) Length of the text at which it has to be shrinked. Default is 100 Characters id:'<< Element id>>' // (optional) Identifies the element in the html dom moreText:'Read more' // (optional) Text to be shown to expand. Default is Read more lessText:'Read less' // (optional) Text to be shown to shrink. Default is Read less isMobile:false // (optional) Enable functionality only for mobile. Default is FALSE continuous:false // (optional) New Line for expand and shrink text. Default is FALSE ; // Returns the html String to be rendered in to HTML
CSS Customization
/* Styles of triple dots*//*Id*//* Styles of collapsed text *//*Id*//* Styles of Read More / Read Less Text *//*Id*/
Example
Custom CSS (styles.css)
/* Styles of collapsed text *//* Styles of Read More / Read Less Text */
Index.js
;; { let config = text:'I am going to get shrinked and expanded' shortTo:15 id:'exampleId' moreText:'Open' lessText:'Close' isMobile:false continuous:true ; return <div dangerouslySetInnerHTML=__html: /> }