Novices Performing Miracles

    react-debounced
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.2 • Public • Published

    Universal debounce hook for React

    CI CodeQL npm version

    react-debounced

    Universal useDebounce hook which can be used for any debounced action. Only the last provided callback will be executed after a given timeout.

    Installation

    Install with yarn

    yarn add react-debounced

    Install with npm

    npm install react-debounced

    Example usage

    Import the hook first

    import useDebounce from 'react-debounced';

    Use it in your functional components:

    const Test = () => {
      const debounce = useDebounce();
      const [value, setValue] = useState('');
      const [debounced, setDebounced] = useState('');
    
      const handleInput = (e) => {
        const { value } = e.target;
        setValue(value);
        debounce(() => {
          // any functionality, like triggering api calls or setting a state, can be used here
          console.log('Debounced');
          setDebounced(value);
        });
      };
    
      return (
        <>
          <p>Value: {value}</p>
          <p>Debounced: {debounced}</p>
          <input placeholder="Fill me out" value={value} onChange={handleInput} />
        </>
      );
    };

    Options

    useDebounce has only one optional parameter timeout, which is set to 250ms per default.

    Example with a 100 milliseconds timeout

    const debounce = useDebounce(100);

    Multiple debounce in one component

    Each call of useDebounce inside a component will return a debounce function with its own timeout. If you need to debounce multiple input fields, just use:

    const debounceOne = useDebounce();
    const debounceTwo = useDebounce();

    Install

    npm i react-debounced

    DownloadsWeekly Downloads

    0

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    76.9 kB

    Total Files

    36

    Last publish

    Collaborators

    • dlavrenuek