Package Exports
- react-collapse
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-collapse) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
react-collapse
Component-wrapper for collapse animation with react-motion for elements with variable (and dynamic) height
Installation
npm
npm install --save react-collapsebower
bower install --save react-collapseDemo
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 git@github.com:nkbt/react-collapse.git
cd react-collapse
npm install
npm start
# then
open http://localhost:8080License
MIT