Using react-collapse with react-responsive
Closed this issue · 7 comments
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 ?
Probably wrap Collapse in MediaQuery, not the other way around
I have already tried on both sides.
Updated my question with the correct code example.
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
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 ?
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 :
- https://unpkg.com/react@15.4.2/dist/react-with-addons.js
- https://unpkg.com/react-dom@15.4.2/dist/react-dom.js
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.