search

s-yadav / react-number-format

React component to format numbers in an input or as a text.
MIT License
3.85k stars 404 forks source link

Hiding input such as SSN digits #403

Open rkoziel opened 4 years ago

rkoziel commented 4 years ago

This is more of a question than an issue. I am working on a component for inputting a social security number. One of the features of this component is to mask the first five digits of the SSN (ex: --1234), and this can be toggled on or off. I've tried using the NumberFormat and it works great for formatting the input to match that of an SSN. Is there a way to be able to display the SSN in the masked format? Is there a way to get NumberFormat to display '' or '#' for the masking/hiding of some of the digits in the SSN?

trvadimt commented 1 year ago

The way how we've solved this before was to pass different masks to format prop like this: 

format={showSsn ? "###-##-####" : "***-**-####}

this is assuming you would like to show last 4 digits. Note, though, that you not only have to pass in showSsn set to false but also, cut off the first 5 digits of the ssn to pass in in value prop.