0.2.1 ⢠Published 2 years ago
creditcard-input-react v0.2.1
creditcard-input-react
⨠A simple and straightforward react creditcard input component.
Feature
- Auto add space every 4 digits
- Remove inputs other than numbers
- Easy to customize to your own (cuz it's unstyled)
Install
npm i creditcard-input-react
Usage
đ ccNumber : credit card number
import { CcNumberInput } from 'creditcard-input-react'
const App = () => {
return (
<main>
<CcNumberInput
className='creditcard-number-input'
placeholder='e.g 1234 1234 1234 1234'
onCcNumberChange={(ccNumber) => console.log(ccNumber)}
/>
</main>
)
}
you can also store the ccNumber into your own state
import { useState } from 'react'
import { CcNumberInput } from 'creditcard-input-react'
const App = () => {
const [ccNumber, setCcNumber] = useState('')
return (
<main>
<CcNumberInput
onCcNumberChange={(newCcNumber) => setCcNumber(newCcNumber)}
/>
<div>{ccNumber}</div>
</main>
)
}
Licence
MIT