Как работать с media queries в React?

Question

[Андрей Охотников]

Нужно скрыть/показать мобильное меню
При обычной верстке в css задаются media queries - и там параметры например "display: none" и т.д.
А как подобный функционал правильно реализовать в реакт?
Я так понимаю нужно на js следить за изменением окна, а через css никак? :)

Comments

[Роман Александрович]

https://www.npmjs.com/package/react-native-media-q...
https://www.npmjs.com/package/react-native-responsive
гляньте вроде бы нужный вам пакет

[Дмитрий Арушанов]

Роман Александрович, Думаю это немного не то. Это для реакт нейтива

[Роман Александрович]

Дмитрий Арушанов, тогда не понимаю сути вашего запроса. Вы можете использовать те же media queries что в обычном css.

[Дмитрий Арушанов]

Роман Александрович,, Ну так я и не спрашивал. Просто уточнил, что это немного в другую сторону плагины.
А По сути, да. В конечном и так рендерится обычный HTML и он отрисуется согласно css.

[Роман Александрович]

Дмитрий Арушанов, ну вот и зачем усложнять и искать какие то дополнительные плагины если все работает из коробки css

Answer 1

[Владимир Проскурин]

Можно вот такое добро использовать https://github.com/contra/react-responsive а можно сделать событие на ресайз окна, и там подставлять значение в state и выводить блок в зависимости от значения этого state.
Можно через css, точно также, ставите блоку className, и этот класс в css прячьте. Но учтите, спрятанный блок не спрячется по настоящему, он будет висеть и работать, просто не будет отображаться.

Answer 2

[Павло Пономаренко]

С Реактом ведь точно так же работают css и media-queries

Answer 3

[Дмитрий Арушанов]

Вот. когда то, натыкался но не пользовался. https://github.com/ReactTraining/react-media

Comments

[Дмитрий Арушанов]

https://github.com/contra/react-responsive