How to work with media queries in React?

Question

css

It is necessary to hide/show the mobile menu
In the usual layout, media queries are set in css - and there are parameters such as "display: none", etc.
And how to implement such functionality correctly in React?
As I understand it, you need to follow the change of the window on js, but in no way through css? :)

Answer 1

You can use this goodness https://github.com/contra/react-responsive or you can make an event on the resize of the window, and there substitute the value in the state and display the block depending on the value of this state.
It is possible through css, in the same way, put the className block, and hide this class in css. But keep in mind that the hidden block will not hide for real, it will hang and work, it just won't be displayed.

Answer 2

After all, css and media-queries work exactly the same with React.

Answer 3

Here. once, stumbled but did not use. https://github.com/ReactTraining/react-media