DebounceWrapper
+DebounceWrapper
자식 요소에서 발생하는 이벤트(ex: Click Event)를 debounce해주는 유틸 컴포넌트입니다.
-
Interface
-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
-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
-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
+Interface
+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
+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
+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:
Input Change Case
+Text: