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.
<Title onClick={toggle} />
<AnimakitExpander expanded={this.state.expanded}>
<Text />
</AnimakitExpander>npm install animakit-expander
| 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 | Easing function of animation |
Part of Animakit. See https://animakit.github.io for more details.