В этой серии статей мы отправимся в путешествие по миру пользовательских хуков React, открывая для себя их огромный потенциал для улучшения ваших проектов разработки. Сегодня мы сосредоточимся на хуке «useMediaQuery», одном из многих тщательно разработанных хуков, доступных в коллекции пользовательских хуков React.

Github: https://github.com/sergeyleschev/react-custom-hooks

import { useState, useEffect } from "react"
import useEventListener from "../useEventListener/useEventListener"

export default function useMediaQuery(mediaQuery) {
    const [isMatch, setIsMatch] = useState(false)
    const [mediaQueryList, setMediaQueryList] = useState(null)
    useEffect(() => {
        const list = window.matchMedia(mediaQuery)
        setMediaQueryList(list)
        setIsMatch(list.matches)
    }, [mediaQuery])
    useEventListener("change", e => setIsMatch(e.matches), mediaQueryList)
    return isMatch
}

Хук useMediaQuery позволяет динамически обновлять пользовательский интерфейс на основе заданного медиа-запроса. Просто введите нужный медиа-запрос в качестве параметра, и хук вернет логическое значение, указывающее, соответствует ли медиа-запрос текущему размеру окна просмотра.

Одним из ключевых преимуществ этого пользовательского хука является его простота и возможность повторного использования. Всего с помощью нескольких строк кода вы можете без особых усилий реализовать адаптивное поведение во всем вашем приложении. Независимо от того, требуется ли вам условный рендеринг компонентов, применение определенных стилей или запуск различных функций в зависимости от размера экрана, useMediaQuery поможет вам в этом.

import useMediaQuery from "./useMediaQuery"

export default function MediaQueryComponent() {
    const isLarge = useMediaQuery("(min-width: 200px)")
    return <div>Large: {isLarge.toString()}</div>
}

Этот механизм не ограничен конкретными вариантами использования; его можно использовать в самых разных сценариях. Например, вы можете использовать его для динамической настройки макета навигационного меню, скрытия или отображения определенных элементов в зависимости от размера экрана или даже для оптимизации загрузки данных в зависимости от доступного пространства. Возможности безграничны, а хук useMediaQuery позволяет обеспечить бесперебойную работу пользователей на различных устройствах и с экранами разного размера.

Полная версия | Пользовательские хуки React: https://habr.com/en/articles/746760/