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

5.0.1Β β€’Β PublicΒ β€’Β Published

useDebouncy

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

GitHub npm bundle size npm types codecov FOSSA Status

Features

  • πŸ‘Œ No dependencies.
  • πŸ‹οΈβ€ Tiny. ~0.2kb.
  • 🦾 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

Usage

Demo codesandbox

Use as effect hook

import React, { useState } from 'react';
import { useDebouncyEffect } from 'use-debouncy';

const App = () => {
  const [value, setValue] = useState('');

  useDebouncyEffect(
    () => 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 { useDebouncyFn } from 'use-debouncy';

const App = () => {
  const handleChange = useDebouncyFn(
    (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.

Development

js-standard-style

License

FOSSA Status

Package Sidebar

Install

npm i use-debouncy

Weekly Downloads

15,431

Version

5.0.1

License

MIT

Unpacked Size

47.1 kB

Total Files

13

Last publish

Collaborators

  • eavam