react-custom-debounced-input

2.0.0 • Public • Published

react-custom-debounced-input

Build Status NPM version

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}
            />
        );
    }
}

Package Sidebar

Install

npm i react-custom-debounced-input

Weekly Downloads

0

Version

2.0.0

License

Apache-2.0

Unpacked Size

41.4 kB

Total Files

25

Last publish

Collaborators

  • jpreynat