Registry /
payments / react-cc-number-formatter
Install & Compatibility
Where this runs
No compatibility data collected yet for this library.
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
CreditCardNumberFormatter
✓ import { CreditCardNumberFormatter } from 'react-cc-number-formatter'
✗ import CreditCardNumberFormatter from 'react-cc-number-formatter'
Named export, not default. TypeScript types are included.
CreditCard
✓ import type { CreditCard } from 'react-cc-number-formatter'
✗ import { CreditCard } from 'react-cc-number-formatter'
TypeScript type, use 'import type' to avoid runtime error.
CreditCardInfo
✓ import type { CreditCardInfo } from 'react-cc-number-formatter'
✗ const { CreditCardInfo } = require('react-cc-number-formatter')
TypeScript type, not available at runtime. Use ESM import type.
BrandType
✓ import type { BrandType } from 'react-cc-number-formatter'
✗ import { BrandType } from 'react-cc-number-formatter'
TypeScript type alias, not a value. Must use 'import type'.
Minimal usage of CreditCardNumberFormatter with all card fields, Luhn validation, and render-prop pattern.
import React, { useState } from 'react';
import { CreditCardNumberFormatter, CreditCard } from 'react-cc-number-formatter';
function App() {
const [creditCard, setCreditCard] = useState<CreditCard>({
number: '',
mm: '',
yy: '',
cvv: ''
});
return (
<CreditCardNumberFormatter
creditCard={creditCard}
onCreditCardChange={(cc, info) => {
setCreditCard(cc);
if (info.complete && info.luhn) {
console.log('Card valid and complete');
}
}}
>
{(cc, emitChange) => (
<div>
<input
value={cc.number}
onChange={e => emitChange({ ...cc, number: e.target.value })}
placeholder="Card number"
/>
<input
value={cc.mm}
onChange={e => emitChange({ ...cc, mm: e.target.value })}
placeholder="MM"
/>
<input
value={cc.yy}
onChange={e => emitChange({ ...cc, yy: e.target.value })}
placeholder="YY"
/>
<input
value={cc.cvv}
onChange={e => emitChange({ ...cc, cvv: e.target.value })}
placeholder="CVV"
/>
</div>
)}
</CreditCardNumberFormatter>
);
}
export default App;
Errors
Common errors & fixes
Attempted import error: 'CreditCardNumberFormatter' is not exported from 'react-cc-number-formatter'.
Using default import instead of named import.
fiximport { CreditCardNumberFormatter } from 'react-cc-number-formatter' TypeError: Cannot read properties of undefined (reading 'number')
Initial creditCard prop does not contain all required fields.
fixProvide object with number, mm, yy, cvv: { number: '', mm: '', yy: '', cvv: '' } Warning: Received `true` for a non-boolean attribute `complete`.
Passing creditCardInfo properties as JSX attributes on a DOM element.
fixDo not spread creditCardInfo onto a DOM element; use it programmatically.
Module not found: Can't resolve 'react-cc-number-formatter'
Package not installed.
fixnpm install react-cc-number-formatter
Audit
Dependencies
reactrequiredPeer dependency for React component usage