The expand component that animate the height of child component when toggling
npm install react-expand-animatedSimple expandable wrapper component with height, opacity animation.
npm i react-expand-animated
``jsx harmony
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 (
Hello
);
}
}
export default App;
``Props
| 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 | arrayOf(shape({ open: object, close: object })) | false | {} | Additional inline-styles on open or close phase. For example: styles={open: { marginTop: 100 }, close: { marginTop: 0 }} ` |Development
Dev: ` npm run dev `
Build: ` npm run build `
Test: ` npm test `
Test Coverage: ` npm run test:cov ``