daili-usage

Paused

daili-usage / web /src /hooks /useMediaQuery.ts

fix: build usage keeper from source

b034029 verified 6 months ago

681 Bytes

/**
 * 媒体查询 Hook
 */

import { useState, useEffect } from 'react';

export function useMediaQuery(query: string): boolean {
  const [matches, setMatches] = useState(() => {
    return window.matchMedia(query).matches;
  });

  useEffect(() => {
    const media = window.matchMedia(query);

    const listener = (event: MediaQueryListEvent) => {
      setMatches(event.matches);
    };

    // Set initial value via listener to avoid direct setState in effect
    listener({ matches: media.matches } as MediaQueryListEvent);

    media.addEventListener('change', listener);
    return () => media.removeEventListener('change', listener);
  }, [query]);

  return matches;
}

	/**
	* 媒体查询 Hook
	*/

	import { useState, useEffect } from 'react';

	export function useMediaQuery(query: string): boolean {
	const [matches, setMatches] = useState(() => {
	return window.matchMedia(query).matches;
	});

	useEffect(() => {
	const media = window.matchMedia(query);

	const listener = (event: MediaQueryListEvent) => {
	setMatches(event.matches);
	};

	// Set initial value via listener to avoid direct setState in effect
	listener({ matches: media.matches } as MediaQueryListEvent);

	media.addEventListener('change', listener);
	return () => media.removeEventListener('change', listener);
	}, [query]);

	return matches;
	}