Adding a mask for an integer with two decimals

[svetlanapuro]

Hi there,

I'm using withMask with the following options:

    useEffect(() => {
      if (inputRef.current) {
        maskRef.current = withMask("integer", {
          groupSeparator: " ",
          radixPoint: ".",
          digits: 2,
          allowMinus: false,
          rightAlign: false,
          showMaskOnHover: false,
          showMaskOnFocus: true,
          tabThrough: true,
        })(inputRef.current);
      }
    }, []);

Is it possible to add an actual mask to the input? The mask should be 0.00, where you can navigate to decimals by using arrows on the keyboard. Now I have only formatting in the input and no mask.

[eduardoborges]

Hey @svetlanapuro! You are using the api in a wrong way.

Try like that:

import { useMaskInput } from "use-mask-input";

export default function App() {
  const decimalMask = useMaskInput({
    mask: "decimal",
    options: {
      groupSeparator: " ",
      radixPoint: ".",
      digits: 2,
      allowMinus: false,
      rightAlign: false,
      showMaskOnHover: false,
      showMaskOnFocus: true,
      tabThrough: true,
    },
  });

  return (
    <div className="App">
      <input ref={decimalMask} />
    </div>
  );
}

Running example:

https://codesandbox.io/p/sandbox/nggdx2

Tell me if it works!

[svetlanapuro]

Hi @eduardoborges! Thank you very much for your reply! I need to use mask with a custom input from Ant Design, that's why I use it like this. Here is the full example https://codesandbox.io/p/sandbox/antd-6-1-3-with-use-mask-input-working-currency-input-without-mask-only-formatting-forked-98d5kd

[eduardoborges]

Hey @svetlanapuro i was investigating your problem this week, the way of antd deal with ref it's very different of native react, maybe i need to creat a Hook specific for that cenario

[svetlanapuro]

Hi @eduardoborges! Thank you very much! That would be great! It's really difficult to find a mask library, that works well with antd. I guess I have tried almost all of them 🙈