https://github.com/sonybinhle/react-expand-animated

🌛Simple animated react expand component
https://github.com/sonybinhle/react-expand-animated

animation collapse expand expandable fade height react

Last synced: about 1 month ago
JSON representation

🌛Simple animated react expand component

• Host: GitHub
• URL: https://github.com/sonybinhle/react-expand-animated
• Owner: sonybinhle
• License: mit
• Created: 2018-03-01T14:28:33.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-10T20:33:13.000Z (about 2 years ago)
• Last Synced: 2024-08-09T12:26:30.788Z (4 months ago)
• Topics: animation, collapse, expand, expandable, fade, height, react
• Language: JavaScript
• Homepage:
• Size: 1.28 MB
• Stars: 7
• Watchers: 3
• Forks: 5
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-github-star - react-expand-animated

README

        
React Expand




  

    

  


  

    

  

  

    

  

  

  

    

   



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

        

          
Hello

        

      

    );

  }

}


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