/react-text-collapse

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

Primary LanguageJavaScriptMIT LicenseMIT

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 git@github.com: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: