React-number-format: Allow optional format

[erasmo-marin]

In the README, there is an example of credit card validation. The thing is that not all credit card are 16 characters length, american express cards have 15 characters, so, the current example will not work with those credit cards.

A solution would be to allow multiple formats or optional formats, like:

#### #### #### #### || #### #### #### ###

or

#### #### #### ###(#)

is this possible? or there is another solution with the current api?

Thanks!!!

[s-yadav]

You can have a different format based on your state. Something like

<NumberFormat  format={this.state.cardType === 'ae' ? '#### #### #### ###' : '#### #### #### ####'}/> 

You can also add onChange handler and deside the card type based on first 4 digits, and then change your cardType state.

[hbarcelos]

Any possibility of having this being supported now?

Brazilian cellphones can have 10 or 11 numbers:

(##) # ####-####
or
(##) ####-####

UX would not be very good if I ask users which kind of phone number they have.

I thought of using the smaller pattern first and if the user tries to input more numbers, then switch to the larger one. However onChange for that doesn't seem to be an option, since it will not trigger after the max length of the input is reached.

[RenatoFranca]

Any possibility of having this being supported now?

Brazilian cellphones can have 10 or 11 numbers:

(##) # ####-####
or
(##) ####-####

UX would not be very good if I ask users which kind of phone number they have.

I thought of using the smaller pattern first and if the user tries to input more numbers, then switch to the larger one. However onChange for that doesn't seem to be an option, since it will not trigger after the max length of the input is reached.

If anyone is looking for a Brazilian phone number format option with 10 or 11 numbers, this is how I did:

const [phoneFormat, setPhoneFormat] = useState<string>('(##) ####-#####')

  const handlePhoneFormat = (e: EventTarget & HTMLInputElement) => {
    const phoneLength = e.value.replace(/\s/g, '').length

    if (phoneLength > 13) {
      setPhoneFormat('(##) # ####-####')
    } else if (phoneLength === 13) {
      setPhoneFormat('(##) ####-#####')
    }
  }