https://github.com/cht8687/react-text-collapse

React text collapse/expand with React-Motion...
https://github.com/cht8687/react-text-collapse

collapse react react-component react-text

Last synced: 20 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/cht8687/react-text-collapse
• Owner: cht8687
• License: mit
• Created: 2016-01-15T09:40:05.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2023-03-01T10:24:17.000Z (over 1 year ago)
• Last Synced: 2024-10-14T13:18:11.860Z (about 1 month ago)
• Topics: collapse, react, react-component, react-text
• Language: JavaScript
• Homepage:
• Size: 8.14 MB
• Stars: 19
• Watchers: 6
• Forks: 13
• Open Issues: 14
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
React text collapse




  

    

  

 

    

 

  

    

  

  

    

  

  

    

  







![React text collapse](react-text-collapse.gif)

## Philosophy

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

## Installation

[![Join the chat at https://gitter.im/cht8687/react-text-collapse](https://badges.gitter.im/cht8687/react-text-collapse.svg)](https://gitter.im/cht8687/react-text-collapse?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

### npm

```

$ npm install --save react-text-collapse

```

## Demo

[Demo](http://cht8687.github.io/react-text-collapse/example/)

## Example code

[Code Example](https://github.com/cht8687/react-text-collapse/blob/master/src/example/example.js)

## Usage

```js

  


    React text collapse is awesome. React text collapse is awesome.

    


    React text collapse is awesome. React text collapse is awesome.

    


    React text collapse is awesome. React text collapse is awesome.

    


    React text collapse is awesome. React text collapse is awesome.

    


  


```

## Options

#### `options`: PropTypes.object.isRequired

```js

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: