/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.

Primary LanguageJavaScript

read-more-read-less-toggler

Sonar Status: Quality Gate Status

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

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