height-transition
Version:
Simple height transition for collapse elements.
47 lines (40 loc) • 1.2 kB
Markdown
Simple height transition for collapse elements.
This library written with react-hook so you have to install version of react 16.8.4 or above.
```sh
npm i height-transition -S
```
Just connect your button with its ref and pass to props HeightTransition component.
```javascript
import React, { Fragment, useRef } from 'react';
import HeightTransition from 'height-transition';
const App = () => {
const toggleElem = useRef(null);
return (
<Fragment>
<button ref={toggleElem}>Toggle</button>
<HeightTransition
styles={styles}
toggle={toggleElem}
animation="ease-out"
time="100ms"
>
Your Content
</HeightTransition>
</Fragment>
);
}
```
| Api | Description | Default |
| ------ | ------ | ------ |
| styles | Set your own style. |
| toggle | Set your element ref |
| animation | Set your animation style | default : "ease" |
| time | Set your animation time | default : "300ms" |
[](https://codesandbox.io/s/381vprmr15?fontsize=14)
MIT