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

npm install --save react-collapse

bower install --save react-collapse

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

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

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

Expands or collapses content.

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>

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>

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>

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>

• initially opened Collapse elements will be statically rendered with no animation (see #19)
• it is possible to override overflow and height styles for Collapse (see #16), and ReactCollapse may behave unexpectedly. Do it only when you definitely know you need it, otherwise, never override overflow and height styles.

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

MIT