Notwithstanding Previous Misdemeanors

    read-more-read-less-toggler

    1.0.9 • Public • Published

    read-more-read-less-toggler

    It's truncate children text & visible Read More button to expand the collapse on specific pre-defined line overflow with collapse gradient effect.

    Turncate Text with Read More Button

    NPM JavaScript Style Guide

    Demo

    Codesandbox Link

    Install

    npm install --save read-more-read-less-toggler

    Usage

    import React from 'react'
    import { ReadMoreToggler } from 'read-more-read-less-toggler'
    
    const App = () => {
      return (
        <ReadMoreToggler>
          Some demo text...
        </ReadMoreToggler>
      )
    }
    
    export default App

    The Options:

    Props type Default Value Defination
    mobileBreakLines number 5 Number of line from which you want to turncate text for mobile view
    desktopBreakLines number 3 Number of line from which you want to turncate text for web view
    topGradient string #FFFFFF Top gradient color on the turncate collapse view
    bottomGradient string #25232363 Bottom gradient color on the turncate collapse view
    buttonColor string Parent Defined Read More / Read Less button & caret icon color

    Contributing

    Pull requests are always welcome, but not all suggested features will get merged. Feel free to contact me if you have an idea for a feature.

    License

    MIT © Hasham-dev

    Install

    npm i read-more-read-less-toggler

    DownloadsWeekly Downloads

    7

    Version

    1.0.9

    License

    MIT

    Unpacked Size

    30.1 kB

    Total Files

    7

    Last publish

    Collaborators

    • hasham-dev