FW React Input Masking - IonInput

ConsumingComponent.tsx

const MyComponent: React.FC = () => {
  const [myValue, setMyValue] = useState('');

  return (
    <MaskedIonInput value={myValue} onChange={(v) => setMyValue(v)} />
   );
}

MaskedIonInput.tsx

const MaskedIonInput = ({ value, onChange }: Props) => {
  const maskRef = useRef<IMask.InputMask<any> | null>(null);

  const inputCallback = useCallback(async (input) => {
    if (!input) {
      return;
    }
    const nativeInput = await input.getInputElement();
    const mask = IMask(nativeInput, {
      mask: Number,
      thousandsSeparator: ",",
    }).on('accept', (e: any) => {
      onChange(mask.value);
    }).on('complete', (e: any) => {
      onChange(mask.value);
    });

    maskRef.current = mask;
  }, []);

  return (
    <IonInput value={value} ref={inputCallback} />
  )
}