API-Options -> availability for "decimal"-mask?

[Danane84]

Hi,

thanks for your great work so far! I used to build my own input masks due to the lack of good third-party options, but it seems that this library could change this! However, when playing around with it, I stumbled across some issues, that I could not resolve myself:

I want to build a decimal-mask that has a decimal-limit of 2, a thousands-separator of " " and a thousands-separator-limit of 3. Is this possible with the most recent version of the library or are these features that are yet to be implemented in the future?

Here is my code example:

import { useForm } from "react-hook-form";
import { useHookFormMask } from "use-mask-input";

const LoanCreateUpdateDeleteForm = (props) => {
  const { loan, isRevolver, budgetId } = props;

  const { register, handleSubmit, errors } = useForm();
  const registerWithMask = useHookFormMask(register);

  const onSubmit = (data) => {};

  const maskOptions = {
    prefix: "EUR ",
    // how to add the options below?
    decimalLimit: 2,
    thousandsSeparatorSymbol: " ",
    thousandsSeparatorLimit: 3,
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="test">Test</label>
      <input
        {...registerWithMask("test", "decimal", maskOptions)}
        type="text"
        autoComplete="off"
      />
    </form>
  );
};

export default LoanCreateUpdateDeleteForm;

Thanks for your help!

[eduardoborges]

Hey @Danane84 ! You want something like that?

[Danane84]

Exactly :)) Thanks a lot for your quick response!

Three more questions: 1.) Is there an option to allow only positive values, so basically not allow any "-" input? 2.) Is there an option to control the text-direction? Currently the text in the input is shown from-right-to-left by default, but I would like to have it from-left-to-right. I tried dir="ltr" and className="text-left" but neither did the trick. 3.) Is there an option to limit the numbers before the decimal, eg. to allow only numbers with 7 digits like 9 999 999.00 but not with 8 digits like 10 000 000.00

Thanks again

[eduardoborges]

@Danane84 Of course its possibel all this items.

1) just pass allowMinus option to false; 2) set rightAlign to false 3) just set the max to 9999999

Tell me if worked for you. <3

[Danane84]

That's awesome, it works like a charm! One last question: Is it possible to pass the unmasked instead of the masked value to the data-props of the onSubmit-function? Currently, I can only see the masked value in data but would need the unmasked one for backend-submission.

[eduardoborges]

@Danane84 This feature its not implemented yet, but is a gread idea! I will include in next release.

[rafma0]

@Danane84 This feature its not implemented yet, but is a gread idea! I will include in next release.

I didn't do lots of tests but If you pass autoUnmask to inputmask e.g.

{...registerWithMask('cpf', '999.999.999-99', { autoUnmask: true })}

it seems to work flawlessly (you get the unmasked value in onSubmit), even letting me keep my Joi validations for the unmasked values :)

cpf: Joi.string().length(11)

(valeu meu querido por essa lib linda éssedois)