Use-input-handler NPM

Use Input Handler

A simple and light custom hook for React to use as input change event handler.

Breaking changes

Adding support for dynamic types using
Removing allow null from config

New Features 💥

Adding more tests.
Adding more usefull configurations to use the hook (number, trim).
Removing allow null configuration.
Returning setValue method to manipulate the value as you want(see example below).
Adding debounce flag to execute the change after after a number of milliseconds.
Adding support for selects and textarea controls.

Installation

Install use-input-handler with NPM

  npm install use-input-handler

How to use it

Simple use

  import useInputHandler from 'use-input-handler';

  const myComponent = () => {
    const [value, changeHandler, setValue] = useInputHandler<string>('');

    const buttonClick = () => {
      setValue('');
    };

    return (
      <>
        <input type="text" value={value} onChange={changeHandler} />
        <p>
          { value }
        </p>
        <button onClick={buttonClick}>
          Clear
        </button>
      </>
    )
  }

Using a parser

  import useInputHandler from 'use-input-handler';

  const myComponent = () => {
    const [value, changeHandler] = useInputHandler<number>(0, {
      parser: (newValue: string) => parseFloat(value),
    });

    return (
      <>
        <input type="number" onChange={changeHandler} />
        <p>
          { value }
        </p>
      </>
    )
  }

Using a validator

  import useInputHandler from 'use-input-handler';

  const myComponent = () => {
    const [value, changeHandler] = useInputHandler(0, {
      parser: (newValue: string) => parseFloat(value),
      validator: (valueToValidate: string) => {
        return typeof valueToValidate === 'number' && valueToValidate > 18;
      },
      onValidatorFail: () => {
        alert('Age must be greater than 18 years old');
      },
    });

    return (
      <>
        <input type="number" onChange={changeHandler} placeholder="Age"/>
        <p>
          { value }
        </p>
      </>
    )
  }

See an example here

Config parameter

Name	Type	Description
validator	(str: ) => Boolean	Validator method before set the value. If validation is false, the value will not be set.
onValidatorSuccess	Function	Method call when validation was successfully.
onValidatorFail	Function	Method call when validation was not successfully.
debounce	Number	Number of milliseconds to execute the change handler after the event itself.
parser	(str: String) =>	Method use to manipulate the value passed from input on change event. This event is executed before validation method.
asNumber	Boolean	Boolean value to transform the input into a number
trim	Boolean	Boolean value to trime the input result