bpk-animate-height

5.1.2 • Public • Published

bpk-animate-height

Animate height using CSS transitions.

Note: This was forked from https://github.com/Stanko/react-animate-height. We have added functionality to set the display property of the container to display: none; when the height is equal to 0.

More information on the easing values can be found at http://easings.net/

Installation

npm install bpk-animate-height --save-dev

Usage

import AnimateHeight from 'bpk-animate-height';
import React, { Component } from 'react';

class AnimateHeightContainer extends Component {
  constructor() {
    super();

    this.state = {
      expanded: false,
    };
  }

  render() {
    return (
      <AnimateHeight
        height={this.state.expanded ? 'auto' : 0}
        duration={200}
      >
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
        Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
        ridiculus mus.
      </AnimateHeight>
    );
  }
}

Props

Property PropType Required Default Value
children node true -
duration number true -
height string or number true -
easing string false 'ease'
onAnimationComplete function false null
style object false {}

Readme

Keywords

none

Package Sidebar

Install

npm i bpk-animate-height

Weekly Downloads

7

Version

5.1.2

License

Apache-2.0

Unpacked Size

23.7 kB

Total Files

8

Last publish

Collaborators

  • mungodewar
  • anambl
  • skyscanner-koalasquad
  • gert-jan.vercauteren
  • frugoman
  • marianeumayer-skyscanner
  • ojcurt
  • mattface