You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP

bpk-animate-height-css

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

bpk-animate-height-css

Animate height using CSS transitions.

4.1.8
latest
71

Supply Chain Security

100

Vulnerability

84

Quality

82

Maintenance

100

License

Unpopular package

Quality

This package is not very popular.

Found 1 instance in 1 package

Dependencies have 1 high alert.

Socket optimized override available

Version published
Weekly downloads
7
600%
Maintainers
5
Weekly downloads
 
Created

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

PropertyPropTypeRequiredDefault Value
childrennodetrue-
durationnumbertrue-
heightstring or numbertrue-
easingstringfalse'ease'
onAnimationCompletefunctionfalsenull
styleobjectfalse{}

FAQs

Package last updated on 20 May 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts