use-debounce-loader/README.md

React hook that exposes the pending state of a debounced value

# 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`