material-ui-credit-card

a Material UI TextField for credit card numbers

Install

yarn add material-ui-credit-card

Usage

Basic

CreditCardField accepts the same props as the Material UI TextField

import CreditCardField from 'material-ui-credit-card'

function MyComponent() {
  return (
    <CreditCardField
      value={creditCard}
      onChange={(e) => setCreditCard(e.currentTarget.value)}
    />
  )
}

Custom braintree/credit-card-type

You can also pass in a custom CreditCardType if you'd like use the credit card type elsewhere or add your own credit card type

import CreditCardField from 'material-ui-credit-card'
import getCreditCardType from 'credit-card-type'

function MyComponent() {
  const [creditCardNumber, setCreditCardNumber] = useState('')

  const cardType = getCreditCardType(creditCardNumber)?.[0]

  return (
    <CreditCardField
      value={creditCardNumber}
      onChange={(e) => setCreditCardNumber(e.currentTarget.value)}
      creditCardType={cardType}
    />
  )
}

Development

This project was bootstrapped using create-react-library

• $ git clone https://github.com/jackHedaya/material-ui-credit-card
• $ cd material-ui-credit-card && yarn
• Continue instructions here

License

MIT © jackHedaya