DebounceHandler

자식 컴포넌트의 이벤트 핸들러에 디바운스(debounce)를 선언적으로 적용할 수 있는 컴포넌트입니다.

Code

🔗 실제 구현 코드 확인

Interface

typescript

type DebounceParameters = Parameters<typeof debounce>;

interface DebounceHandlerProps {
  children: JSX.Element;
  capture: string;
  wait: DebounceParameters[1];
  options?: DebounceParameters[2];
}

const DebounceHandler: ({ children, capture, wait, options, }: DebounceHandlerProps) => JSX.Element

Usage

Button Click Case

typescript

import { DebounceHandler } from '@modern-kit/react'

const Example = () => {
  const onClick = () => {
    console.log('debounce');
  };
  
  return (
    <DebounceHandler capture="onClick" wait={500}>
      <button onClick={nClick}>Button</button>
    </DebounceHandler>
  );
};

Input Change Case

typescript

const Input = ({ onChange }: { onChange: (value: string) => void }) => {
  const [value, setValue] = useState('');

  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    setValue(e.target.value);
    onChange(e.target.value);
  };

  return <input type="text" onChange={handleChange} value={value} />;
};

const Example = () => {
  const [text, setText] = useState('');

  const onChange = (value: string) => {
    setText(value);
  };

  return (
    <>
      <DebounceHandler capture={'onChange'} wait={500}>
        <Input onChange={onChange} />
      </DebounceHandler>
      <p>{text}</p>
    </>
  );
}

Example

Button Click Case

브라우저의 개발자 도구의 콘솔에서 동작을 확인하세요.

Input Change Case

Text: