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:
This is how I want it, which happens after three clicks on the container):
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.
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 toflexGrow: 1
if active, elseflexGrow: 0
. The active index is cycled from 0 through 2 onClick on the container component.This is what I get initially:
This is how I want it, which happens after three clicks on the container):
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. SettingunmountOnHide={true}
does not seem to have any effect.Maybe I'm just using this in an unsupported way?