A simple and light custom hook for React to use as input change event handler.
- Adding support for dynamic types using
- Removing allow null from config
- 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.
Install use-input-handler with NPM
npm install use-input-handler
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>
</>
)
}
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>
</>
)
}
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
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 |
All these values are optional. The last two options are applied if there is no a parser method.
- Add more tests