Nourishing Plushie Monster

    more-less

    1.1.1 • Public • Published

    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
    import moreLess from 'more-less';
     
    // Set Configurations
    let 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
    }
     
    moreLess(config);       // Returns the html String to be rendered in to HTML

    CSS Customization

    /* Styles of triple dots*/
    #readMore-dots-/*Id*/{
        color:black;
    }
    /* Styles of collapsed text */
    #readMore-more-/*Id*/{
        /* ... */
    }
    /* Styles of Read More / Read Less Text */
    #readMore-/*Id*/{
        color:blue;
    }

    Example

    Custom CSS (styles.css)

    #readMore-dots-exampleId{
        color:black;
    }
    /* Styles of collapsed text */
    #readMore-more-exampleId{
        color:grey;
    }
    /* Styles of Read More / Read Less Text */
    #readMore-exampleId{
        color:blue;
    }

    Index.js

    import moreLess from 'more-less';
    import React, { Component } from 'react'
    import './styles.css';
     
    export default class Example extends Component {
      render() {
        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: moreLess(config)}}
          />
        )
      }
    }

    Install

    npm i more-less

    DownloadsWeekly Downloads

    4

    Version

    1.1.1

    License

    ISC

    Unpacked Size

    6.12 kB

    Total Files

    5

    Last publish

    Collaborators

    • senthurathiban