react-css-collapse

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

Example

Accordion using react-css-collapse

Install

Support

Global coverage > 92% - browserl.ist

Usage

import Collapse from 'react-css-collapse';

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

Properties

isOpen: PropTypes.boolean

Expands or collapses content.

children: PropTypes.node

<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

Specify transition using the class selector with transition or the style property. The react-css-collapse-transition class selector is added by default unless you specify your own.
The default transition can be overridden using the transition prop, or with custom styling 👇. Note: replace the selector with your selector if you have specified a different className.

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

onRest: PropTypes.func

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.

ARIA and data attributes

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>

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 🎆