useMediaQuery

Resize 시에도 동작하며, 미디어 쿼리 문자열의 분석 결과를 쉽게 확인 할 수 있는 커스텀 훅입니다.

Interface

const useMediaQuery: (query: string) => {
    isMatch: boolean;
}

Usage

import { useMediaQuery } from '@devgrace/react';

const Example = () => {
  const { isMatch } = useMediaQuery('(min-width: 768px)');

  return (
    <div>
      <p>
        {isMatch
          ? 'viewport 너비가 768px 이상입니다.'
          : 'viewport 너비가 768px 미만입니다.'}
      </p>
    </div>
  );
};

브라우저 너비를 수정해보세요!

viewport 너비가 768px 미만입니다.