Найти тему

Как рендерить компоненты используя медиа запросы в ReactJS?


Вам скорее всего приходилось скрывать или отображать компоненты в RractJS исходя из, например, ширины страницы, ориентации или разрешения экрана. Библиотека react-responsive выводит использование медиа запросов на новый уровень.

Рассмотрим простой пример. Для создания правил нужно использовать хук useMediaQuery, передав в него нужный медиа запрос.

При срабатывании медиа запроса происходит обновление APP компонента и все дочерние компоненты через логическое И && добавляются или удаляются из DOM.

Подробнее ознакомиться можно по ссылке: https://www.npmjs.com/package/react-responsive

Как рендерить компоненты используя медиа запросы в ReactJS?
Около минуты