AnimakitExpander

React component for the expanding and collapsing of the blocks. Supports both vertical and horizontal mode.

Usage

<Title onClick={toggle} />
<AnimakitExpander expanded={this.state.expanded}>
  <Text />
</AnimakitExpander>

Demo

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	Easing function of animation

Origin

Part of Animakit. See https://animakit.github.io for more details.