React Expand
## react-expand-animated 1.0.2
Simple expandable wrapper component with height, opacity animation.
## Demo
## Install
`npm i react-expand-animated`
## Usage
```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 ```
