cht8687 / react-text-collapse

React text collapse/expand with React-Motion...

React text collapse

Philosophy

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

Installation

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 [e-mail]: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: