useWindowSize

현재 브라우저 창의 너비와 높이 정보를 추적하고, 반환하는 커스텀 훅입니다. 또한, 불 필요한 호출을 방지하기위한 debounce 기능을 제공합니다.

Code

🔗 실제 구현 코드 확인

Interface

typescript

interface WindowSize {
  width: number | null;
  height: number | null;
}

interface useWindowSizeProps {
  debounceWait?: number; // debounce delay time, default: 300
}

typescript

function useWindowSize({ debounceWait }: useWindowSizeProps = {}): WindowSize

Usage

Default

typescript

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

const Example = () => {
  const windowSize = useWindowSize();
  const boxStyle = useMemo(() => {
    return {
      width: '100%', 
      background: '#439966', 
      fontSize: '2rem',
      color: '#fff',
    }
  }, []);

  return (
    <div style={boxStyle}>
      브라우저 크기를 줄여보세요. <br />
      width: {windowSize.width}px <br />
      height: {windowSize.height}px
    </div>
  );
};

Debounce

typescript

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

const DebounceExample = () => {
  const windowSize = useWindowSize({ debounceWait: 300 });
  const boxStyle = useMemo(() => {
    return {
      width: '100%', 
      background: '#0067A3', 
      fontSize: '2rem',
      color: '#fff',
    }
  }, []);

  return (
    <div style={boxStyle}>
      브라우저 크기를 줄여보세요. <br />
      width: {windowSize.width}px <br />
      height: {windowSize.height}px
    </div>
  );
};