react-collapse

Component-wrapper for collapse animation with react-motion for elements with variable (and dynamic) height

Installation

npm

npm install --save react-collapse

bower

bower install --save react-collapse

Demo

http://nkbt.github.io/react-collapse/example

Codepen demo

http://codepen.io/nkbt/pen/MarzEg

Usage

<Collapse isOpened={true || false}>
  <div>Random content</div>
</Collapse>

Options

isOpened: PropTypes.boolean.isRequired

Expands or collapses content.

children: PropTypes.node.isRequired

One or multiple children with static, variable or dynamic height.

<Collapse isOpened={true}>
  <p>Paragraph of text</p>
  <p>Another paragraph is also OK</p>
  <p>Images and any other content are ok too</p>
  <img src="nyancat.gif">
</Collapse>

fixedHeight: PropTypes.number

If content's height is known ahead it is possible to bypass the process of content height calculation by passing optional fixedHeight prop with number of pixels.

<Collapse isOpened={true} fixedHeight={100}>
  <div>Animated container will always expand to 100px height</div>
</Collapse>

springConfig: React.PropTypes.arrayOf(React.PropTypes.number)

Custom config [stiffness, damping] passed to the spring function (see https://github.com/chenglou/react-motion#spring-number---stiffness-damping---configurationobject)

import {presets} from 'react-motion';

<Collapse isOpened={true} springConfig={presets.wobbly}>
  <div>Wobbly animated container</div>
</Collapse>

<Collapse isOpened={true} springConfig={[100, 20]}>
  <div>Customly animated container</div>
</Collapse>

Pass-through props

All other props are applied to a container that is being resized. So it is possible to pass style or className, for example.

<Collapse isOpened={true}
  style={{width: 200, border: '1px solid red'}}
  className="collapse">

  <div>
    Animated container has red border, 200px width
    and has `class="collapse"`
  </div>
</Collapse>

Development and testing

To run example covering all ReactCollapse features, use npm start, which will compile src/example/Example.js

git clone [email protected]:nkbt/react-collapse.git
cd react-collapse
npm install
npm start

# then
open http://localhost:8080

License

MIT