Component-wrapper for collapse animation with react-motion for elements with variable (and dynamic) height
npm install --save react react-motion react-collapseDon't forget to manually install peer dependencies (react, react-motion) if you use npm@3.
<script src="https://unpkg.com/react/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-motion/build/react-motion.js"></script>
<script src="https://unpkg.com/react-collapse/build/react-collapse.js"></script>
(Module exposed as `ReactCollapse`)http://nkbt.github.io/react-collapse
http://codepen.io/nkbt/pen/MarzEg
Default behaviour, never unmounts content
import {Collapse} from 'react-collapse';
// ...
<Collapse isOpened={true || false}>
<div>Random content</div>
</Collapse>If you want to unmount collapsed content, use Unmount component provided as:
import {UnmountClosed} from 'react-collapse';
// ...
<UnmountClosed isOpened={true || false}>
<div>Random content</div>
</UnmountClosed>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 Collapse component has more Collapse components inside, it needs hasNestedCollapse to be set
to avoid delayed animations. See nkbt#76 for tech details.
<Collapse isOpened={true} hasNestedCollapse={true}>
<Collapse isOpened={true}>
<div>Nested collapse</div>
</Collapse>
<Collapse isOpened={true}>
<div>Nested collapse</div>
</Collapse>
</Collapse>If content's height is known ahead it is possible pass 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, precision} passed to the spring function (see https://github.com/chenglou/react-motion#--spring-val-number-config-springhelperconfig--opaqueconfig)
import {presets} from 'react-motion';
<Collapse isOpened={true} springConfig={presets.wobbly}>
<div>Wobbly animated container</div>
</Collapse><Collapse isOpened={true} springConfig={{stiffness: 100, damping: 20}}>
<div>Customly animated container</div>
</Collapse>When initially opened, by default collapse content will be opened without animation, instantly. With this option set to true you can enforce initial rendering to be smoothly expanded from 0.
It is used internally in Unmount component implementation.
It is possible to set className for extra div elements that ReactCollapse creates.
Example:
<Collapse theme={{collapse: 'foo', content: 'bar'}}>
<div>Customly animated container</div>
</Collapse>Default values:
const theme = {
collapse: 'ReactCollapse--collapse',
content: 'ReactCollapse--content'
}Which ends up in the following markup:
<div class="ReactCollapse--collapse">
<div class="ReactCollapse--content">
{children}
</div>
</div>NOTE: these are not style objects, but class names!
Callback function for animation finished from react-motion. It can be used to trigger any function after animation is done.
<Collapse onRest={() => console.log(123)}>
<div>Container text</div>
</Collapse>Callback function for changes in height. Also passes measured width. As an example it can be used to implement auto-scroll if content expand below the fold.
<Collapse onMeasure={({height, width}) => this.setState({height, width})}>
<div>Container text</div>
</Collapse>Callback function for every re-render while animating.
Passes current height, as well as from/to heights.
DANGEROUS use with caution, may have huge performance impact if used improperly. Never do setState with it, since it is running while rendering and React will shoot Warning.
Possible usage: synchronous scrolling of some other component
<Collapse onRender={({current, from, to}) => (this.anotherComponent.scrollTop = current)}>
<div>Container text</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
overflowandheightstyles for Collapse (see #16), and ReactCollapse may behave unexpectedly. Do it only when you definitely know you need it, otherwise, never overrideoverflowandheightstyles.
- Use named exports, it is a preferred way
V2:
import Collapse from 'react-collapse';V3
import {Collapse} from 'react-collapse';- Default behavior changed to never unmount collapsed element. To actually unmount use extra provided component
UnmountCollapsed
V2:
import Collapse from 'react-collapse';
<Collapse isOpened={true || false}>
<div>Random content</div>
</Collapse>V3:
import {UnmountClosed as Collapse} from 'react-collapse';
<Collapse isOpened={true || false}>
<div>Random content</div>
</Collapse>onHeightReadyrenamed toonMeasurewhich now takes object of shape{width, height}
V2:
<Collapse onHeightReady={height => console.log(height)}>
<div>Random content</div>
</Collapse>V3:
<Collapse onMeasure={({height, width}) => console.log(height, width)}>
<div>Random content</div>
</Collapse>- Some new props/features:
hasNestedCollapse,forceInitialAnimation,onRender, etc
Currently is being developed and tested with the latest stable Node 8 on OSX.
To run example covering all ReactCollapse features, use yarn start, which will compile example/Example.js
git clone [email protected]:nkbt/react-collapse.git
cd react-collapse
yarn install
yarn start
# then
open http://localhost:8080# to run ESLint check
yarn lint
# to run tests
yarn test
# to run end-to-end tests
# first, run `selenium/standalone-firefox:3.4.0` docker image
docker run -p 4444:4444 selenium/standalone-firefox:3.4.0
# then run test
yarn e2eMIT