Have ideas to improve npm?Join in the discussion! »

    @prawn-cake/react-input-debouncer

    1.0.0 • Public • Published

    react-input-debouncer

    Why ?

    Are you familiar with a problem of poor performance when filtering list of items using by the input text?

    A typical solution is to debounce an input change for some milliseconds. And many libraries exist to solve it, including famous lodash debounce.

    Few issues with them:

    • Many of those libraries are wrappers around lodash.
    • Libraries provide wrapper input components which is totally redundant

    This library just provides react specific debounce function to use it with regular html input.

    Install

    npm install --save @prawn-cake/react-input-debouncer
    
    # OR
    yarn add @prawn-cake/react-input-debouncer
    

    Usage

    Here I use useState hook, one of latest and greatest react hooks features.

    import { useState } from 'react'
    import debounce from 'react-input-debouncer'
    
    function MyComponent({ props }) {
        [value, setValue] = useState(''); 
        return (
            <React.Fragment>
                ...
                <label>{value}</label>
                <input 
                    type="text"
                    onChange={debounce(e => setValue(e.target.value), 100)}
                />
            </React.Fragment>
        )
    }
    

    MyComponent renders a fragment with a label and a text input elements. Text input is debounced for 100ms.

    Install

    npm i @prawn-cake/react-input-debouncer

    DownloadsWeekly Downloads

    1

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    2.72 kB

    Total Files

    3

    Last publish

    Collaborators

    • avatar