tannerlinsley / react-show

⚛️ A 3kb css animation component for React.
https://codesandbox.io/s/2v66j7pm8y
402 stars 30 forks source link

Children seem to be unmounted on first render, appear after re-render #9

Closed brumm closed 6 years ago

brumm commented 6 years ago

Hey,

Here's a demo: https://codesandbox.io/s/0vr08vv8wl

I'm trying to create some kind of horizontal accordion component which renders an array of items, of which only one can be active. An inactive item should collapse the label to only show a 'header' component. The entire thing should be responsive. The items' container is a ReactShow node, which is set to flexGrow: 1 if active, else flexGrow: 0. The active index is cycled from 0 through 2 onClick on the container component.

This is what I get initially: 0vr08vv8wl codesandbox io_ 1

This is how I want it, which happens after three clicks on the container): 0vr08vv8wl codesandbox io_

It seems like the 'hidden' items are not rendered initially, despite setting unmountOnHide={false} (which I thought was the issue at first). However, after rendering once, they remain rendered. Setting unmountOnHide={true} does not seem to have any effect.

Maybe I'm just using this in an unsupported way?

tannerlinsley commented 6 years ago

Version 3 is out now and this should be fixed. Documentation should be live today.