1.2.0 • Published 12 months ago

use-input-handler v1.2.0

Weekly downloads
-
License
MIT
Repository
github
Last release
12 months ago

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

NameTypeDescription
validator(str: UseInputType) => BooleanValidator method before set the value. If validation is false, the value will not be set.
onValidatorSuccessFunctionMethod call when validation was successfully.
onValidatorFailFunctionMethod call when validation was not successfully.
debounceNumberNumber of milliseconds to execute the change handler after the event itself.
parser(str: String) => UseInputTypeMethod use to manipulate the value passed from input on change event. This event is executed before validation method.
asNumberBooleanBoolean value to transform the input into a number
trimBooleanBoolean 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

MIT License

Author

1.2.0

12 months ago

1.1.1

12 months ago

1.1.0

12 months ago

1.0.2

12 months ago

1.0.1

12 months ago

1.0.0

12 months ago

0.0.1

12 months ago

0.0.3-beta

12 months ago

0.0.2-beta

12 months ago

0.0.1-beta

12 months ago