React component for the expanding and collapsing of the blocks

React component for the expanding and collapsing of the blocks

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

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

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

Sponsored by Evil Martians

Github Repository