1.2.0 • Published 12 months ago
use-input-handler v1.2.0
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
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