useMediaQuery

미디어 쿼리 문자열의 분석 결과를 쉽게 확인 할 수 있는 커스텀 훅입니다.

Code

🔗 실제 구현 코드 확인

Interface

typescript

function useMediaQuery(mediaQueryString: string, defaultValue?: boolean): boolean

Usage

typescript

import { useMediaQuery } from '@modern-kit/react';

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

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