Skip to content

Latest commit

 

History

History
105 lines (65 loc) · 2.9 KB

README.md

File metadata and controls

105 lines (65 loc) · 2.9 KB
Raw

react-tiny-collapse

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

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.