Source: input/InputMaskOqt.js

import React, { useEffect, useRef, useState } from "react";
import { useIMask, IMask } from 'react-imask';
import { processOptions } from "../../_core";

/**
 * Componente que renderiza un input mask
 * Docs: https://imask.js.org/guide.html#masked
 * @name Reactor.Components.Input.InputMaskOqt
 * @param {string} name name del input
 * @param {string} value el valor por defecto
 * @param {"IMask.Masked"|"RegExp"|"Function"|"String"|"Number"|"Date"|"Array"} mask máscara
 * @param {string} options json string con atributos para el componente InputMask (ver docs)
 * @param {string} input_options json string con atributos input (class, style, etc)
 * @class 
 * @example 
<input_mask value="25/03/2022" name="inputName" mask="99/99/9999" mask_char=" " input_options='{"className": ""}'/> 
 */

const maskTypes = {
  "IMask.Masked": IMask.Masked,
  "RegExp": RegExp,
  "Function": Function,
  "String": String,
  "Number": Number,
  "Date": Date,
  "Array": Array,
}
export const InputMaskOqt = ({defaultValue, name, mask = "Number", autoFocus, options, input_options, className, children}) => {

  const [ opts, setOpts ] = useState({ ...processOptions(options), mask: maskTypes[mask] || mask });

  const {
    ref,
    maskRef,
    value,
    setValue,
    unmaskedValue,
    setUnmaskedValue,
    typedValue,
    setTypedValue,
  } = useIMask(opts);

  useEffect(()=>{
    setValue(defaultValue);
  }, [defaultValue])

  return (
    <>
      <input ref={ref} className={className} {...processOptions(input_options)} name={name} />
      {children}
    </>
  );

}