imaskjs
imaskjs copied to clipboard
Return completedValue from the useIMask hook
What problem you are trying to solve?
I'm trying to get the completed value with the useIMask hook
Describe the solution you'd like
Here's a snippet to demonstrate what I'm trying to do. With vanilla, I can add a complete listener to the mask, and get notified when the mask is completed. I don't really have this possibility with the hook:
const options1 = {
mask: '+{1} (000) 000-0000',
};
const element = document.getElementById('input');
const mask = IMask(element, options1);
mask.on('complete', () => {
console.log(`I'd like to get this value back from the useIMask hook:`, element.value)
})
So I'd like the return type of useIMask to be extended:
{
// Fields currently
ref: MutableRefObject<MaskElement>;
maskRef: MutableRefObject<IMask.InputMask<Opts>>;
value: IMask.InputMask<Opts>['value'];
setValue: Dispatch<IMask.InputMask<Opts>['value']>;
unmaskedValue: IMask.InputMask<Opts>['unmaskedValue'];
setUnmaskedValue: Dispatch<IMask.InputMask<Opts>['unmaskedValue']>;
typedValue: IMask.InputMask<Opts>['typedValue'];
setTypedValue: Dispatch<IMask.InputMask<Opts>['typedValue']>;
// My proposal
completedValue: string | undefined
};
Describe alternatives you've considered I could use the vanilla imask lib, but that would defeat the purpose of having the react hook. The mixin is missing this feature as well as far as I can see, but I didn't plan to use it.