nkbt/react-collapse

Using react-collapse with react-responsive

Closed this issue · 7 comments

kopax commented

I am trying to implement a collapse for a certain width.

I am using :

This is my jsx:

<Collapse isOpened={isOpened}>
  <MediaQuery maxDeviceWidth={sm}>
    {children}
  </MediaQuery>
</Collapse>
<MediaQuery minDeviceWidth={sm}>
  {children}
</MediaQuery>

But the collapse isn't working anymore. I have also tried like this :

<MediaQuery maxDeviceWidth={sm}>
   <Collapse isOpened={isOpened}>
      {children}
  </Collapse>
</MediaQuery>
<MediaQuery minDeviceWidth={sm}>
  {children}
</MediaQuery>

same result, does anyone has figure out how this would be possible ?

nkbt commented

Probably wrap Collapse in MediaQuery, not the other way around

kopax commented

I have already tried on both sides.
Updated my question with the correct code example.

nkbt commented

I don't use react-responsive, I have no idea how it works. If you can show me an example of this issue in codepen - then I probably could help

kopax commented

Thanks for your reply, unfortunately, I've tried to configure codepen with react and all the libraries but I couldn't make it work.

Codepen throw dumb errors, if you have an example of codepen including your lib that would be a great start.

Basically, I can see my Collapse taking the content and removing it from the DOM when hided.

It's then replaced by a comment by react-collapse.

The thing is, I need to display the content of my collapse under a certain media width.

This require to update the state.isOpened when the media reach it's width breakpoint.

Also, the content should not be removed.

I've tried with version 3.2.0 and 2.3.3 and it's the same think.

Do you know how I could solve the media query issue ?

nkbt commented
kopax commented

Well, It's impossible.

I can't add this source to the code pen and this is the version I am using :

I have tried to swap your react sources to newer versions :

But the problem remains.

I've just noticed how important is the keepCollapsedContent options.
I'll do further test myself. I am closing it and if I can't solve the media query question, I'll open an appropriate one with examples.

nkbt commented