The react-expand-animated from sonybinhle

react-expand-animated's Introduction

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

react-expand-animated's People

Contributors

Stargazers

Watchers

react-expand-animated's Issues

Animation not playing

For some reason the animation doesn't play. Is this due to CSS?

`<Expand
open={context.state.collapse}
duration={1000}
easing={'ease-in-out'}
transitions={transitions}

`

allow closed state to be set as optional prop

so you can have partially open eg 25px then fully open rather than 0 to full.

Expanding dynamic generated content?

Does it also expand dynamic generated content?
That is: children items of a parent items are retrieved from the backend and should then be shown in smooth expandable way.