https://github.com/animakit/animakit-expander

UNMAINTAINED: AnimakitExpander
https://github.com/animakit/animakit-expander

Last synced: 3 months ago
JSON representation

UNMAINTAINED: AnimakitExpander

• Host: GitHub
• URL: https://github.com/animakit/animakit-expander
• Owner: animakit
• License: mit
• Created: 2016-04-22T12:03:19.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2019-03-07T07:47:41.000Z (almost 6 years ago)
• Last Synced: 2024-10-31T05:20:48.450Z (3 months ago)
• Language: JavaScript
• Homepage: https://animakit.github.io/
• Size: 114 KB
• Stars: 37
• Watchers: 3
• Forks: 9
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-list - animakit-expander - AnimakitExpander - React component for the expanding and collapsing of the blocks. (Ferramentas / Form Components)
• awesome-react-components - animakit-expander - AnimakitExpander - React component for the expanding and collapsing of the blocks. (UI Animation / Form Components)

README

        
# AnimakitExpander

**WARNING:** Currently unmaintained because of lack of interest, activity and resources

React component for the expanding and collapsing of the blocks.

Supports both vertical and horizontal mode.

## Usage

```javascript

  

```

## [Demo](https://animakit.github.io/#/expander)

## Installation

```

npm install animakit-expander

```

## Properties

| Property | Required | Type | Default Value  | Available Values  | Description |

| ----- | ----- | ----- | ----- | ----- | ----- |

| expanded | true | bool | `false` | `true`, `false` | State of the component: expanded or collapsed |

| horizontal | false | bool | `false` | `true`, `false` | If true, component will expand in horizontal direction |

| align | false | string |  | `top`, `bottom` for the default direction or `left`, `right` for the horizontal direction | Align of the content during the animation |

| duration | false | number | `500` | Any integer number | Duration of animation |

| durationPerPx | false | number | `0` | Any integer number | Duration of animation per pixel. Use it if you want the duration depended on the size and calculated dynamically. |

| easing | false | string | `ease-out` | Any [easing function](http://easings.net/) | Easing function of animation |

## Origin

Part of Animakit.

See https://animakit.github.io for more details.