react-custom-debounced-input

React hook to debounce a custom input component's onChange method. Also provides a wrapper component if hooks cannot be used.

Installation

$ npm install react-custom-debounced-input --save
# or
$ yarn add react-custom-debounced-input

Hook API

import * as React from 'react';
import { useDebouncedInput } from 'react-custom-debounced-input';

function UppercaseDebouncedInput(): React.ReactElement {
    // The debounced value
    const [value, setValue] = React.useState('');

    const inputRef = React.useRef<HTMLInputElement | null>(null);
    // Focus the input on initial mount
    React.useEffect(() => {
        if (inputRef.current) {
            inputRef.current.focus();
        }
    }, []);

    // Actually do something with the value when the input is blurred
    // or when enter or escaped is pressed
    const onChange = (value: string) => {
        this.setState({ value });
    };

    // Optional modifier for value
    const onBeforeChange = (value: string) => {
        return value.toUpperCase();
    };

    // Get the props to pass to the <input /> component
    const debouncedProps = useDebouncedInput({
        value,
        onChange,
        onBeforeChange,
        ref: inputRef
    });

    return (
        <input {...debouncedProps} />
    );
}

Component API

interface DebouncedInputProps {
    // Forwarded to <component> as the <value> prop
    value: string;
    // Rendered component, defaults to <input />
    component?: React.ComponentType;
    // Debounced callback when input is blurred or on pressing Enter
    onChange: (value: string) => void;
    // Optional modifier for <value> before <onChange> is called
    onBeforeChange?: (update: any) => string;
    // Callback when content is blurred
    onBlur?: (event: React.FocusEvent) => void;
    // Optional event preventDefaulter for the onKeyDown event
    onKeyDown?: (event: React.KeyboardEvent) => void;
    // Key of the ref callback prop. Defaults to 'ref'. Some components use
    // other conventions like 'inputRef', etc...
    componentRefProp?: string;
    // Any other props passed to the rendered component
    [prop: string]: any;
}

Usage

import * as React from 'react';
import { DebouncedInput } from 'react-custom-debounced-input';

class UppercaseDebouncedInput extends React.Component {
    // The debounced value
    state: {
        value: string
    } = {
        value: ''
    };

    // Actually do something with the value when the input is blurred
    // or when enter or escaped is pressed
    onChange = (value: string) => {
        this.setState({ value });
    };

    // Optional modifier for value
    onBeforeChange = (value: string) => {
        return value.toUpperCase();
    };

    render() {
        return (
            <DebouncedInput
                value={this.state.value}
                onChange={this.onChange}
                onBeforeChange={this.onBeforeChange}
            />
        );
    }
}