React Collapsable

A collapsable react component, animated using CSS transitions based on the height of your content.

Installation

npm i react-collapsable -S

or with yarn;

yarn add react-collapsable

Usage

import React, { useState } from 'react'
import Collapsable from 'react-collapsable'

const myComponent = () => {
    const [isOpen, toggleOpen] = useState(false);
    return (
        <div>
            <button onClick={() => toggleOpen(!isOpen)}>Toggle</button>
            <Collapsable isOpen={isOpen}>
                <h1>My Content In Here!</h1>
            </Collapsable>
        </div>
    )
}

Props

| Prop | Required | Default | | --------------------------------- | -------- | ------------- | | isOpen (boolean) | | | | minAnimationDuration (in seconds) | | 0.3 | | maxAnimationDuration (in seconds) | | 1 | | speedDivider (in milliseconds) | | 1000 | | easing (css string) | | "ease-in-out" |