Create expanding / collapsing sections in React with with css transitions

Downloads in past


2.0.0a year ago6 years agoMinified + gzip package size for react-tiny-collapse in KB


npm version build status
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


npm install --save react-tiny-collapse


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)}>

unmountChildren : Boolean = false
Unmounts children when closed

Example usage:

import TinyCollapse from "react-tiny-collapse";


<TinyCollapse isOpen={this.state.isOpen}>

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.