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';

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</div>
        </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