DebounceWrapper

자식 요소에서 발생하는 이벤트(ex: Click Event)를 debounce해주는 유틸 컴포넌트입니다.

Code

🔗 실제 구현 코드 확인

Interface

typescript

type DebounceParameters = Parameters<typeof debounce>;

interface DebounceWrapperProps {
  children: JSX.Element; // 하나의 요소만 children prop으로 넘겨줄 수 있습니다.
  capture: string;
  wait: DebounceParameters[1]; // number
  options?: DebounceParameters[2]; // DebounceSettings
}

const DebounceWrapper: ({
  children,
  capture,
  wait,
  options,
}: DebounceWrapperProps) => React.FunctionComponentElement<any>;

Usage

Button Click Case

typescript

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

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

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 (
    <>
      <DebounceWrapper capture={'onChange'} wait={500}>
        <Input onChange={onChange} />
      </DebounceWrapper>
      <p>{text}</p>
    </>
  );
}

Example

Button Click Case

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

Input Change Case

Text: