nosir/cleave-zen

npm install --save cleave-zen

<input class="creditcard-input" type="text" />
<input class="creditcard-type" type="text" />

import { formatCreditCard, getCreditCardType } from 'cleave-zen'

const creditcardInput = document.querySelector('.creditcard-input')
const creditCardType = document.querySelector('.creditcard-type')

creditcardInput.addEventListener('input', e => {
  const value = e.target.value
  creditcardInput.value = formatCreditCard(value)
  creditCardType.innerHTML = getCreditCardType(value)
})

import React, { useRef, useState } from 'react'
import { formatCreditCard, getCreditCardType } from 'cleave-zen'

const App = () => {
  const inputRef = useRef(null)
  const [value, setValue] = useState('')
  const [type, setType] = useState('')

  return (
    <>
      <input
        ref={inputRef}
        value={value}
        onChange={e => {
          const value = e.target.value
          setValue(formatCreditCard(value))
          setType(getCreditCardType(value))
        }}
      />
      <div>value: {value}</div>
      <div>type: {type}</div>
    </>
  )
}

import { formatCreditCard, type FormatCreditCardOptions } from 'cleave-zen'

const options: FormatCreditCardOptions = { delimiter: '-' }
const value: string = formatCreditCard('5163000011112222', options)

import { registerCursorTracker, DefaultCreditCardDelimiter } from 'cleave-zen'

registerCursorTracker({ input: creditCardInput, delimiter: DefaultCreditCardDelimiter }})

import { useRef, useEffect } from 'react'

...

const inputRef = useRef(null)
useEffect(() => {
    // registerCursorTracker itself returns an unregister destructor
    // function so you can place it here for hook component unmount
    return registerCursorTracker({ input: inputRef.current, delimiter: DefaultCreditCardDelimiter })
}, [])

...