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.