Package detail

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 ( <Fragment> <button onClick={this.toggle}>Open</button> <Expand open={this.state.open}> <div style={{ width: '300px', height: '400px', color: 'red' }}>Hello </Expand> </Fragment> ); } }

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