uNmAnNeR / imaskjs

vanilla javascript input mask
https://imask.js.org
MIT License
4.91k stars 254 forks source link

Return completedValue from the useIMask hook #670

Closed balazs-edes-lab49 closed 2 years ago

balazs-edes-lab49 commented 2 years ago

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.

uNmAnNeR commented 2 years ago

i was possible actually, fixed docs