Natural Pacifist Manatees

    react-input-with-debouncing

    1.1.0 • Public • Published

    react-input-with-debouncing

    A small lightweight React input component with debouncing that can be used in place of normal <input /> or <textarea /> fields.The component renders input with debouncing onChange event.

    NPM JavaScript Style Guide node-current npm peer dependency version

    Installation

    NPM

    npm install --save react-input-with-debouncing

    Usage

    import React, { Component } from 'react'
    
    import InputWithDebouncing from 'react-input-with-debouncing'
    import 'react-input-with-debouncing/dist/index.css' //import of index.css is totally optional.
    
    class ExampleInputWithDebouncing extends Component {
      constructor(props) {
        super(props);
        this.state = {
          value: '';
        }
      }
    
      render() {
        return (
          <InputWithDebouncing
            type="text"
            placeholder='Search'
            className='input-search'
            minLength={1}
            debounceTimeout={1000}
            onChange={(e) => this.setState({ value: e.target.value })}
            value={this.state.value}
          />
        )
      }
    }

    Options

    Default prop values

    <InputWithDebouncing
      element= 'input',
      type= 'text',
      onKeyDown= {undefined},
      onBlur= {undefined},
      value= {undefined},
      minLength= {0},
      debounceTimeout= {500},
      notifyOnEnter= {true},
      notifyOnBlur= {true},
      inputRef= {undefined}
     />

    Usage explanation

    Note: This package is primarily built and tested on <input /> and <textarea /> keeping use cases in mind. But you can explore.

    element : PropTypes.oneOfType([PropTypes.string, PropTypes.func]) (default: 'input')

    element prop can take either one of the value from input or textarea.

    type : PropTypes.string (default: 'text')

    Default value of type prop is text but you can specify other options like number.

    onChange: PropTypes.func.isRequired (Mandatory Props)

    onChange function is called with event passed through it on input change with debounced timeout.

    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]) (default: undefined)

    Default value of input is undefined. If not specified, then input works as non-controlled input.

    minLength: PropTypes.number (default: 0)

    minLength prop specifies minimal length of text to start notify, if value becomes lesser then minLength (after removing some characters), there will be a notification with empty value ''.

    debounceTimeout: PropTypes.number (default: 500)

    debounceTimeout specifies the debouncing time in ms. If you specify debounceTimeout = -1, then it disable automatic notifications completely. On pressing of Enter, notification will be triggered only in this case.

    notifyOnEnter: PropTypes.bool (default: true)

    On pressing Enter, notification of current value will be triggered immediately. Notification value follows the same rule as with debounced notification, so if length is less, then minLength - empty value '' will be sent back.

    notifyOnBlur: PropTypes.bool (default: true)

    In this case, notification will be sent only when focus leaves the input field.

    inputRef: PropTypes.func (default: undefined)

    Pass ref={inputRef} to generated input element. ref is a special prop in React, and hence renamed ref to inputRef.

    className : className props will be applied directly on generated input.

    This is an arbitrary prop which is directly applied to input field.

    placeholder : placeholder props will be applied directly on generated input.

    This is an arbitrary prop which is directly applied to input field.

    Test

    Unit testing with lint testing

    npm run test

    Unit testing

    npm run test:unit

    Lint testing

    npm run test:lint

    Testing during development

    npm run test:watch

    License

    MIT © Satyendra Pandit

    Install

    npm i react-input-with-debouncing

    DownloadsWeekly Downloads

    1

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    45.7 kB

    Total Files

    8

    Last publish

    Collaborators

    • satyendra10