Hide certain chars while typing

[ar7casper]

Describe the issue and the actual behavior

Imagine I got an SSN field, and while the user types, I need to substitute the entered number with an asterisk. Except for the last 4 digits, which we would like to show. Currently, working with the format prop, I couldn't make it work. It seems like format gets the val from the input, which I have to work with. If a user enters 4 and I replace it with *, I lose the data, and it doesn't type any other digits. Storing the value in a local state also didn't work.

<NumberFormat format={(val) => {
  if (val.length >= 9) {
    return val.slice(0,9);
  }
  return val;
}}

The above snippet works excellent. The second I'm changing to -

<NumberFormat format={(val) => {
  if (val.length >= 9) {
    return val.slice(0,9);
  }
  const masked = hideSsn(val);
  return masked;
}}

I always get the initial * back. Not sure if you support such a need.

[jbean96]

I am looking for this exact use case, would be incredibly helpful if react-number-format could support this.

[AndrewOttavianoAbb]

Agreed 100%! We have a use case where this would be super helpful as well. We thought this would be supported in version 5 because of the Persian numerals example, but I'm not able to get it to work. I either experience the same problem as mentioned above or the component seems to eat my input.

@s-yadav, could this be supported? If it already is, could you please provide an example in the documentation for us to follow (I could just not understand how to set it up)? Thank you so much! This is a really helpful, useful, and cool project! We appreciate your work on it!