Simple expandable wrapper component with height, opacity animation.
npm i react-expand-animated
import React, { Component } from 'react';
import Expand from 'react-expand-animated';
class App extends Component {
state = { open: false };
toggle = () => {
this.setState(prevState => ({ open: !prevState.open }));
};
render() {
return (
<Fragment>
<button onClick={this.toggle}>Open</button>
<Expand open={this.state.open}>
<div style={{ width: '300px', height: '400px', color: 'red' }}>Hello</div>
</Expand>
</Fragment>
);
}
}
export default App;
Props | Type | Required | Default | Description |
---|---|---|---|---|
children | node | true | undefined | The expanded or collapsed content |
open | bool | false | false | When set to true expand the children component otherwise collapse it |
duration | number | false | 400 | Animation duration in ms |
easing | string | false | 'ease-in-out' | Css3 Animation's type |
className | string | false | '' | Wrapper's className |
tag | string | false | 'div' | Wrapper's tag |
transitions | arrayOf(string) | false | ['height', 'opacity'] | Transition attributes |
styles | shape({ open: object, close: object }) | false | {} | Additional inline-styles on open or close phase. For example: styles={open: { marginTop: 100 }, close: { marginTop: 0 }} |
Dev: npm run dev
Build: npm run build
Test: npm test
Test Coverage: npm run test:cov