ilokesto

useMediaQuery

useMediaQuery는 CSS media query를 구독하고 현재 match 여부를 반환합니다. SSR-safe: 서버에서는 false를 반환하고 클라이언트에서 hydrate됩니다.

import { useMediaQuery } from '@ilokesto/utilinent/hooks';

function Nav() {
  const isDesktop = useMediaQuery('(min-width: 768px)');
  return isDesktop ? <DesktopNav /> : <MobileNav />;
}

media query 문자열을 전달하면 match가 변경될 때 반환값이 반응적으로 갱신됩니다.

useResizeObserver

ResizeObserver로 element의 크기를 추적합니다.

useEventListener

window, element, ref에 이벤트 리스너를 연결합니다.

목차

useMediaQuery