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)
; <Collapse isOpened=true springConfig=presetswobbly> <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 git@github.com:nkbt/react-collapse.gitcd react-collapsenpm installnpm start # then open http://localhost:8080
License
MIT