Skip to content

Latest commit

 

History

History
118 lines (86 loc) · 3.15 KB

README.md

File metadata and controls

118 lines (86 loc) · 3.15 KB
Raw

React text collapse

NPM Version Coverage Status Build Status Downloads License

React text collapse

Philosophy

Keep things simple! You don't need jQuery...

Installation

Join the chat at https://gitter.im/cht8687/react-text-collapse

npm

$ npm install --save react-text-collapse

Demo

Demo

Example code

Code Example

Usage

<ReactTextCollapse options={TEXT_COLLAPSE_OPTIONS}>
  <p>
    React text collapse is awesome. React text collapse is awesome.
    <br />
    React text collapse is awesome. React text collapse is awesome.
    <br />
    React text collapse is awesome. React text collapse is awesome.
    <br />
    React text collapse is awesome. React text collapse is awesome.
    <br />
  </p>
</ReactTextCollapse>

Options

options: PropTypes.object.isRequired

const TEXT_COLLAPSE_OPTIONS = {
  collapse: false, // default state when component rendered
  collapseText: '... show more', // text to show when collapsed
  expandText: 'show less', // text to show when expanded
  minHeight: 100, // component height when closed
  maxHeight: 250, // expanded to
  textStyle: { // pass the css for the collapseText and expandText here
    color: "blue",
    fontSize: "20px"
  }
}

Development

$ git clone [email protected]:cht8687/react-text-collapse.git
$ cd react-text-collapse
$ npm install
$ webpack-dev-server

Then

open http://localhost:8080/webpack-dev-server/

License

MIT

Contributors

Thanks to these wonderful developers for helping this project: