react-css-collapse

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


Example

$3

Install


Support

Global coverage > 92% - browserl.ist

Usage

``jsx
import Collapse from 'react-css-collapse';






`

Properties

#### isOpen: PropTypes.boolean

Expands or collapses content.

#### children: PropTypes.node

`js



Paragraph of text

Another paragraph is also OK

Images and any other content are ok too

`

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

`scss
.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.

$3

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:

`js



Paragraph of text



`

Development and testing

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

`bash
git clone [repo]
cd [repo]
npm install
npm run storybook
``
Open http://localhost:6006 🎆