React Expand
react-expand-animated 1.0.2
Simple expandable wrapper component with height, opacity animation.
Demo
Install
npm i react-expand-animated
Usage
import React Component from 'react';import Expand from 'react-expand-animated'; state = open: false ; { this; }; { return <Fragment> <button =>Open</button> <Expand => <div =>Hello</div> </Expand> </Fragment> ; } ;
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