⚒️

ユーザーのwindowサイズを検知するカスタムhookの作り方

2024/05/17に公開

いつも作り方を忘れるのでメモ

実装方法

useMediaQuery

export function useMediaQuery(query: string) {
  const [value, setValue] = useState(false);

  useEffect(() => {
    function onChange(event: MediaQueryListEvent) {
      setValue(event.matches);
    }

    const result = matchMedia(query);
    result.addEventListener("change", onChange);
    setValue(result.matches);

    return () => result.removeEventListener("change", onChange);
  }, [query]);

  return value;
}

呼び出し側

export default function App() {
  const isDesktop = useMediaQuery("(min-width: 768px)")

  if (isDesktop) {
    return (
        <SomeComponent/>
    )
  }
  ...
}

Discussion