use-debouncy
    TypeScript icon, indicating that this package has built-in type declarations

    4.3.0Β β€’Β PublicΒ β€’Β Published

    useDebouncy

    πŸŒ€ Small (~0.2kb) debounce effect hook for React with TypeScript support

    license dependents minified minified + gzip tree-shaking downloads types codecov FOSSA Status

    Features

    • πŸ‘Œ No dependencies.
    • πŸ‹οΈβ€ Tiny. ~0.2kb. Size Limit controls the size.
    • 🦾 Performance. Used by requestAnimationFrame.
    • πŸ“– Types. Support TypeScript.
    • 🎣 Easy. Use like React effect or function.

    Installation

    NPM

    npm install use-debouncy

    Yarn

    yarn add use-debouncy

    Import bit component

    Check bit component here

    bit import eavam.use-debouncy/use-debounce

    Usage

    Demo codesandbox

    Use as effect hook

    import React, { useState } from 'react';
    import useDebouncy from 'use-debouncy/effect'; // <== importing from effect
    
    const App = () => {
      const [value, setValue] = useState('');
    
      useDebouncy(
        () => fetchData(value), // function debounce
        400, // number of milliseconds to delay
        [value], // array values that the debounce depends (like as useEffect)
      );
    
      return (
        <input value={value} onChange={(event) => setValue(event.target.value)} />
      );
    };

    Use as callback function

    import React, { useState } from 'react';
    import useDebouncy from 'use-debouncy/fn'; // <== importing from fn
    
    const App = () => {
      const handleChange = useDebouncy(
        (event) => fetchData(event.target.value), // function debounce
        400, // number of milliseconds to delay
      );
    
      return <input value={value} onChange={handleChange} />;
    };

    API Reference

    useDebouncy/effect

    function useDebouncyEffect(fn: () => void, wait?: number, deps?: any[]): void;
    Prop Required Default Description
    fn βœ“ Debounce callback.
    wait 0 Number of milliseconds to delay.
    deps [] Array values that the debounce depends (like as useEffect).

    useDebouncy/fn

    function useDebouncyFn(
      fn: (...args: any[]) => void,
      wait?: number,
    ): (...args: any[]) => void;
    Prop Required Default Description
    fn βœ“ Debounce handler.
    wait 0 Number of milliseconds to delay.

    License

    FOSSA Status

    Install

    npm i use-debouncy

    DownloadsWeekly Downloads

    10,379

    Version

    4.3.0

    License

    MIT

    Unpacked Size

    31.4 kB

    Total Files

    20

    Last publish

    Collaborators

    • eavam