Animated, nestable collapsibles with React

There’s a ton of libraries out there to animate a collapsible element when you aren’t dealing with React, but how do you do it when React is involved? The DOM changes so frequently with every render that you loose references and it makes it difficult to measure. No problem with React references. In fact, while it might seem harder at first to do an animated collapsible with React, its really not much different than if you didn’t use React. React just provides the handy state object for you to store your open/close state in – the rest is the same. To demonstrate this, I’ve created a simple Codepen:

Leave a Reply