react-expand-animated

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 (

Open



);
}
}

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 ``