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