react-css-collapse

react-css-collapse

Component-wrapper for collapse animation with css for elements with variable and dynamic height

Installation

Using npm:

npm install --save react-css-collapse

Then with a module bundler like webpack, use as you would anything else:

import Collapse from 'react-css-collapse';

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

Options

isOpen: PropTypes.boolean.isRequired

Expands or collapses content.

children: PropTypes.node.isRequired

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

<Collapse isOpen={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="cutecat.gif" />
</Collapse>

className: PropType.string

You can specify a className with your desired style and animation

.react-css-collapse-transition {
  transition: height 250ms cubic-bezier(.4, 0, .2, 1);
}

Development and testing

To run example covering all features, use npm run storybook.

git clone [repo]
cd [repo]
npm install
npm run storybook

Open http://localhost:6006 🎆

Changelog

2.0.2

Apr 5, 2017

• :bug: Bugfix Using setTimeout(fn, 0) to ensure correct pixelheight is set before transition (back) starts. This ensures we are not transitioning back from auto. Ref: http://stackoverflow.com/questions/779379/why-is-settimeoutfn-0-sometimes-useful
• :bug: Bugfix Checking if content is set before accessing content in requestAnimationFrame callback. This fixes a bug where this.content was null initially when navigating back to a page using react-css-collapse you had been to before.