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

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