zapier/react-collapse

Name: react-collapse

Owner: Zapier

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

Forked from: nkbt/react-collapse

Created: 2016-05-14 20:51:29.0

Updated: 2016-05-14 20:51:30.0

Pushed: 2016-05-15 22:52:57.0

Homepage: null

Size: 3109

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

react-collapse

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

Installation

NPM

install --save react react-motion react-height react-collapse

Don't forget to manually install peer dependencies (react, react-motion, react-height) if you use npm@3.

Bower:

r install --save https://npmcdn.com/react-collapse/bower.zip

or in bower.json

ependencies": {
"react-collapse": "https://npmcdn.com/react-collapse/bower.zip"

then include as

ipt src="bower_components/react/react.js"></script>
ipt src="bower_components/react-height/build/react-height.js"></script>
ipt src="bower_components/react-motion/build/react-motion.js"></script>
ipt src="bower_components/react-collapse/build/react-collapse.js"></script>

1998 Script Tag:

ipt src="https://npmcdn.com/react/dist/react.js"></script>
ipt src="https://npmcdn.com/react-height/build/react-height.js"></script>
ipt src="https://npmcdn.com/react-motion/build/react-motion.js"></script>
ipt src="https://npmcdn.com/react-collapse/build/react-collapse.js"></script>
ule exposed as `ReactCollapse`)

Demo

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

Codepen demo

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

Usage

lapse isOpened={true || false}>
iv>Random content</div>
llapse>

Options

isOpened: PropTypes.boolean.isRequired

Expands or collapses content.

children: PropTypes.node.isRequired

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

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

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.

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

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

Custom config {stiffness, damping, precision} passed to the spring function (see https://github.com/chenglou/react-motion#–spring-val-number-config-springhelperconfig–opaqueconfig)

rt {presets} from 'react-motion';

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

s
lapse isOpened={true} springConfig={{stiffness: 100, damping: 20}}>
iv>Customly animated container</div>
llapse>

keepCollapsedContent: React.PropTypes.bool (default: false)

By default ReactCollapse destroys content of collapsed element. setting keepCollapsedContent to true allows to keep content. ReactCollapse renders container with height: 0 and overflow: hidden (with all the content untouched) when closed instead of destroying it. See #18 for details.

onHeightReady: React.PropTypes.func

Callback function for changes in height as reported by react-height. As an example it can be used to implement auto-scroll if content expand below the fold.

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.

lapse isOpened={true}
yle={{width: 200, border: '1px solid red'}}
assName="collapse">

iv>
Animated container has red border, 200px width
and has `class="collapse"`
div>
llapse>

Behaviour notes

• 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.

Development and testing

Currently is being developed and tested with the latest stable Node 5 on OSX and Windows. Should be ok with Node 4, but not guaranteed.

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

clone git@github.com:nkbt/react-collapse.git
eact-collapse
install
start

en
 http://localhost:8080

Tests

test

 run tests in watch mode for development
run test:dev

 generate test coverage (./reports/coverage)
run test:cov

License

MIT