useMediaQuery

Return if a given media query is matching the current browser state.

Installation

npx rabbithook@latest add use-media-query

Usage

App.tsx

import useMediaQuery from "@/hooks/use-media-query";

function Component() {
  const isMobile = useMediaQuery("(max-width: 768px)");

  return <div>isMobile: { isMobile ? "Yes" : "No" }</div>
}

Code

Typescript

use-media-query.ts

import { useState, useEffect } from "react";

function useMediaQuery(mediaQuery: string) {
  const [isMatch, setIsMatch] = useState(false);
  const [mediaQueryList, setMediaQueryList] = useState<MediaQueryList | null>(null);

  useEffect(() => {
    const list = window.matchMedia(mediaQuery);
    setMediaQueryList(list);
    setIsMatch(list.matches);
  }, [mediaQuery])

  useEffect(() => {
    if (mediaQueryList === null) return;

    mediaQueryList.addEventListener("change", event => setIsMatch(event.matches));

    return () => mediaQueryList.removeEventListener("change", event => setIsMatch(event.matches));
  }, [mediaQueryList])

  return isMatch;
}


export default useMediaQuery;

Javascript

use-media-query.js

import { useState, useEffect } from "react";

function useMediaQuery(mediaQuery) {
  const [isMatch, setIsMatch] = useState(false);
  const [mediaQueryList, setMediaQueryList] = useState(window.matchMedia(mediaQuery));

  useEffect(() => {
    const list = window.matchMedia(mediaQuery);
    setMediaQueryList(list);
    setIsMatch(list.matches);
  }, [mediaQuery])

  useEffect(() => {
    if (mediaQueryList === null) return;

    mediaQueryList.addEventListener("change", event => setIsMatch(event.matches));

    return () => mediaQueryList.removeEventListener("change", event => setIsMatch(event.matches));
  }, [mediaQueryList])

  return isMatch;
}


export default useMediaQuery;