height-transition

Basic Height Transition Library for React

Simple height transition for collapse elements.

Installation

This library written with react-hook so you have to install version of react 16.8.4 or above.

npm i height-transition -S

Setup

Just connect your button with its ref and pass to props HeightTransition component.

import React, { Fragment, useRef } from 'react';
import HeightTransition from 'height-transition';
 
const App = () => {
   const toggleElem = useRef(null);
     return (
    <Fragment>
      <button ref={toggleElem}>Toggle</button>
      <HeightTransition 
         styles={styles} 
         toggle={toggleElem} 
         animation="ease-out" 
         time="100ms"
         >
        Your Content
      </HeightTransition>
    </Fragment>
  );
}

API

Api	Description	Default
styles	Set your own style.
toggle	Set your element ref
animation	Set your animation style	default : "ease"
time	Set your animation time	default : "300ms"

Live Example

License

MIT