# use-debounce-loader

> React hook that exposes the pending state of a debounced value

Latest version **0.0.4** (published 2020-05-22) · ISC license · 0 weekly downloads

## Install

```sh
npm install use-debounce-loader
pnpm add use-debounce-loader
yarn add use-debounce-loader
bun add use-debounce-loader
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.4 |
| Published | 2020-05-22 |
| First published | 2020-05-21 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 210.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | adamhannigan81@gmail.com |
| Maintainers | adamhannigan |
| Keywords | react, hooks, debounce |

## Links

- npm: https://www.npmjs.com/package/use-debounce-loader
- Repository: https://github.com/assignar/use-debounce-loader
- Homepage: https://github.com/assignar/use-debounce-loader#readme
- Issues: https://github.com/assignar/use-debounce-loader/issues
- npm.io page: https://npm.io/package/use-debounce-loader

## Dependencies (1)

- [use-debounce](https://npm.io/package/use-debounce.md) ^3.4.2

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.4 (latest) — 2020-05-22
- 0.0.3 — 2020-05-22
- 0.0.2 — 2020-05-22
- 0.0.1 — 2020-05-21

## README

# useDebounceLoader React Hook

A React hook that exposes the pending state of a debounced value.

This is useful to show loading, **typing** and pending user interactions.

# Installation

**yarn**
`yarn install use-debounce-lodader`

**npm**
`npm install use-debounce-loader`

# Example

https://codesandbox.io/s/frosty-antonelli-idx3l?file=/src/App.js:36-53

**userInput.jsx**

    import React, { useState } from 'react';
    import { useDebounceLoader } from 'use-debounce-loader';
    
    export default function Input() {
      const [onChange, {
        isLoading,
        value,
      }] = useDebounceLoader()
    
      return (
        <div>
          <input
            onChange={(e) => {
              onChange(e.target.value);
            }}
          />
          <p>Text value: {value}</p>
          <p>Is typing: {isLoading}</p>
        </div>
      );
    }

# API

The useDebounceLoader returns a callback to trigger the debounce and the current state of the debounce

    useDebounceLoader: (options: Options<T>) => [
        (newValue: T) =>  void,
        {
    	    isLoading: boolean;
    	    value: T;
    	}
    ]

**onChange** `(newValue: T) =>  void`


Call this function with the value you wish to debounce. 

    const [onChange, debouncer] = useDebounceLoader()
    
    useEffect(() => {
	      onChange('First value)
     })
    
    return (
    	<input
    		onChange=(e => onChange(e.target.value)
    	/>
    )

 **isLoading** `boolean`

Whether the value is currently being debounced.

**value** `T`

The current value being debounced - this will be updated as soon as the `onChange` callback is fired.

# Optional Arguments

You can also pass a range of options to customise the behaviour of the debouncer.

    interface Options<T> {
	    debounceTime?: number;
	    initialValue?: T;
        onFinish?: (value: T) =>  void;
    }

**Example**

    const [onChange, debouncer] = useDebounceLoader({
	    debounceTime: 2000,
	    initialValue: 100,
	    onFinish,
	})

**debounceTime (Optional)** `number`

Set the time you wish to debounce in milliseconds.

Default is 1000ms - 1 second.

**initialValue (Optional)** `T`

The initialValue to set as the debounced value

**onFinish (Optional)** `(value: T) => void`

Will fire when the debouncer has resolved. This is useful to trigger data fetches or other side effects.

    const onFetchData = (search: string) => {
        // Perform some request
    }
    
    const [onChange, debouncer] = useDebounceLoader({
    	onFinish: onFetchData,
    })

Note - `debouncer.value` will be the same as the `search`

---
_Source: https://npm.io/package/use-debounce-loader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._