react-css-collapse
Collapse component with css transition for elements with variable and dynamic height.
Example
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 🎆