sonybinhle/react-expand-animated

🌛Simple animated react expand component

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

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