Use Input Handler

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

New Features 💥

• Adding 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.

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(''); // pass desired initial value

    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(0, {
      parser: (newValue: any) => 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: any) => parseFloat(value),
      validator: (valueToValidate: any) => {
        return typeof valueToValidate === 'number' && valueToValidate > 18;
      },
      onValidatorFail: () => {
        alert('Age must be greater than 18 years old');
      },
      allowNull: true,
    });

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

See an example here

Config parameter

Name	Type	Description
validator	(str: UseInputType) => 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) => UseInputType	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

All these values are optional. The last two options are applied if there is no a parser method.

To Do

• Add more tests

License

Author

• @ajomuch92