Skip to main content

creditCardFormatter

A formatter for credit card numbers. It formats the input based on the issuer of the card according to this table. Try inputting a number that start with 34 for instance.

const formattedInput = useFormattedInput(
  creditCardFormatter({
  })
)
Value: "4242424242424242"

Controlled value​

value​

Type: string
Default: ''

Value of the input.

onChange​

Type: (value: string, formattedValue: string) => void
Default: undefined

The onChange callback is called when the value changes. It receives both the formattedValue and the value.

liveUpdate​

Type: boolean
Default: false

When false (default value), the onChange callback is only called on blur for improved performance. If yo need the onChange callback to be called each time the user types a character, pass true.

allowOverflow​

Type: boolean
Default: true

If you want the user not to be able to continue typing after reaching the end of the mask, pass false. It is recommended to keep the default value.