Collapse component with css transition for elements with variable and dynamic height.

⚠️ ️You need to specify the transition property or add a class selector with style (transition) in your own stylesheet to add animation. You can copy the smashing example below 💅

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

npm install --save react-css-collapse

import Collapse from 'react-css-collapse';

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

Expands or collapses content.

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>

You can specify a className with your desired style and animation. By default react-css-collapse-transition will be added to the component.

You can also specify a transition in line by using the transition prop.

<Collapse transition="height 250ms cubic-bezier(.4, 0, .2, 1)">
  <p>Paragraph of text</p>
</Collapse>

Callback function for when your transition on height (specified in className) is finished. It can be used to trigger any function after transition is done.

Collapse transfers aria- and data- attributes to the component's rendered DOM element. For example this can be used to set the aria-hidden attribute:

<Collapse isOpen={isOpenState} aria-hidden={isOpenState ? 'false' : 'true'}>
  <p>Paragraph of text</p>
</Collapse>

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

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

Open http://localhost:6006 🎆