react-tiny-collapse

TinyCollapse is a lightweight component for making animated expand / collapse components. It measures the height and applies it inline so you can add a transition (works when children change too).

Browser support:

TinyCollapse needs requestAnimationFrame in order to do its thing, so make sure to add polyfills if you need to support older browsers (like IE9 and below).

Why it exists

I really like react-collapse and I've used it a lot. It does have some drawbacks though, such as being dependent on react-motion and not playing nice with server side rendering (as of v4). I wanted to create a more lightweight, dependency-free alternative.

Other Tiny libraries

• react-tiny-transition
• react-tiny-crossfade

Install

npm install --save react-tiny-collapse

API

animateChildren : Boolean = false Animates height when children changes (set to false when nesting collapses)

children : React element Stuff you want to expand / collapse (one root node only)

className : String

component : String | Function component = "div" Type of element used for the wrapper node If a function component is used it must use React.forwardRef

componentProps : Object Additional props passed to the wrapper component If componentProps includes a style property, some individual styles may be overridden by the inline styles set by react-tiny-collapse.

duration : Number = 500 Transition duration (milliseconds)

easing : String = cubic-bezier(0.3,0,0,1) CSS easing function

forceInitialAnimation : Boolean = false Force animation when TinyCollapse mounts open

isOpen : Boolean = false Shows or hides the content

onMeasure : Function Called whenever TinyCollapse measures height

<TinyCollapse onMeasure={height => doStuff(height)}>
  <div>Stuff</div>
</TinyCollapse>

unmountChildren : Boolean = false Unmounts children when closed

Example usage:

import TinyCollapse from "react-tiny-collapse";

...

<TinyCollapse isOpen={this.state.isOpen}>
  <div>Content</div>
</TinyCollapse>

Nested TinyCollapse

When using nested TinyCollapse instances it's a good idea to set animateChildren to false on the outer one. If you don't, the outer one will measure the wrong height which will result in jaggy animation and clipping of content.