useMediaQuery Hook only sets value on initial redner

[AdlerJS]

Issue:

Per the README the following code should trigger true or false if media query elements are within the 'md' range.

  const { breakpoints } = useTheme();
  const isMd = useMediaQuery(breakpoints.only('sm'));
  console.log('HIT***', isMd);

This works as expected for initial render but if the user resizes the hook does not update.

Steps to Reproduce
1.) Place the code in a component and refresh the window. Observe that the console log runs
2.) Resize window to small or large
3.) Observe that the hook / console log doenst update

[AdlerJS]

@mg901 Using your code as a baseline I created a hook locally in my project that seems to be working.

import { useState, useLayoutEffect, useEffect } from 'react';

const IS_BROWSER = typeof window !== 'undefined';
const useEnhancedEffect = IS_BROWSER ? useLayoutEffect : useEffect;

function getInitialState(query: string): boolean {
  return window.matchMedia(query).matches;
}

/**
 * Custom hook for handling media queries.
 * @param {string} query - The media query to match.
 * @returns {boolean} - `true` if the media query matches, otherwise `false`.
 */
export function useMediaQuery(query: string): boolean {
  const [state, setState] = useState(IS_BROWSER && getInitialState(query));

  useEnhancedEffect(() => {
    let mounted = true;
    const mediaQueryList = window.matchMedia(query.replace(/^@media\s*/, ''));

    const handleChange = () => {
      if (!mounted) return;
      setState(mediaQueryList.matches);
    };

    mediaQueryList.addEventListener('change', handleChange);

    setState(mediaQueryList.matches);

    return () => {
      mounted = false;
      mediaQueryList.removeEventListener('change', handleChange);
    };
  }, [query]);

  return state;
}

If you want I can open a PR for this if this code looks ok with you

[mg901]

Hi, @AdlerJS. Thank you for your bug report. Please, install the latest version of the styled-breakpoints to fix it.