DebounceWrapper

A utility component that debounces events that occur on child elements (e.g. Click Event).

Interface

// https://team-grace.github.io/devgrace/docs/react/hooks/useDebounce
type DebounceParameters = Parameters<typeof debounce>;

interface DebounceWrapperProps {
  children: JSX.Element; // Only one element can be passed to the 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 '@devgrace/react'

const Example = () => {
  const onClick = () => {
    console.log('debounce');
  };

  return (
    <DebounceWrapper capture="onClick" wait={500}>
      <Button onClick={onClick}>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

Please verify the behavior in the browser's developer console.

Input Change Case

Text: