React component which uses CSS to animate a child from its current height and/or width to height: auto
and/or width: auto
when mounting/updating/unmounting.
CSS does not currently support animating element height/width to auto
and so normally javascript is used to achieve this effect.
This component uses CSS to perform the animation, following an algorithm (first described here). The desired height/width of the element is calculated, and then css is used to transition that height/width. After the transition has completed the height/width is set to auto
.
react-slide-expand is perfect for dropdown lists, popup menus, accordions and closeable panels which have varying sized content.
I am not aware of any cross-browser issues from IE10 and onwards.
npm install react-slide-expand --save
Simply wrap the component you want to slide with the SlideDown
component:
import React from 'react'
import {SlideDown} from 'react-slidedown'
import 'react-slidedown/lib/slidedown.css'
export function MyDropdown(props) {
return (
<SlideDown className={'my-dropdown-slidedown'}>
{props.open ? props.children : null}
</SlideDown>
)
}
In the example above the css file needed by react-slidedown is included via JavaScript which is the normal way of doing things when using webpack css-loader, it is also populated in the style
property of package.json so if you are using parcelify it should get included automatically. Otherwise it is also possibe to import it from css:
@import "node_modules/react-slidedown/lib/slidedown.css";
Property | Type | Default | Required? | Description |
---|---|---|---|---|
children | Children | No | When provided the component opens and when removed the component closes | |
closed | Boolean | No | If true the component will close even if children are provided |
|
className | String | No | CSS class name to be used in addition to the react-slidedown class name |
|
transitionOnAppear | Boolean | true |
No | Do a transition animation on initial mount |
as | String | div |
No | The outermost Element type to render |
To quickly see a live demonstration of react-slidedown go here.
To build and run this example project:
git clone https://github.com/frankwallis/react-slidedown.git
cd react-slidedown
npm install
npm start
You can customise the transition used for the animation by overriding styles on the SlideDown
component:
.react-slidedown.my-dropdown-slidedown {
transition-duration: 1.2s;
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}
The default values used are:
.react-slidedown {
transition-duration: .5s;
transition-timing-function: ease-in-out;
}