react-performant-collapsible

A performant React.js Collapsible component.

Why it's performant?

It doesn't repaint at all during the collapse/expand animation (It only repaint once at the beginning of the animation and once at the end of the animation):

Installation

npm i react-performant-collapsible

or

yarn add react-performant-collapsible

or

pnpm i react-performant-collapsible

Props

Prop Name	Type	Required	Note
className	String	false	className for the wrapper element
style	Object	false	style for the wrapper element
horizontal	Boolean	false	if it is horizontal. default: false
maskColor	String	false	background color for the mask element
animationDuration	String	false	how long does the collapse/expand animation take. format is like 1s or 400ms, same as CSS property transition-duration
animationTimingFunction	String	false	format is like linear or cubic-bezier(.29, 1.01, 1, -0.68), same as CSS property transition-timing-function
collapsible	Boolean	true	is currently collapsed or not
children	React Node	true

What is props maskColor used for?

Sometimes if the background color is not white, you need to set the maskColor to match the background color, e.g.

<div style={{background: 'red'}}>
  <Collapsible collapsible={state.collapsible} maskColor="red">
    { someChildren }
  </Collapsible>
</div>