{"id":41823,"library":"react-cc-number-formatter","title":"React Credit Card Number Formatter","description":"A React adapter component for formatting, validating, and managing credit card form inputs. Current stable version is 0.9.1, released under MIT license. It formats card numbers with spaces every four digits, performs Luhn validation, blocks invalid input for MM/YY/CVV fields, and uses a render-prop pattern to be styling-agnostic. Unlike alternatives (e.g., react-credit-cards), it separates formatting logic from UI and provides detailed credit card info (brand, completeness per field). Depends on React only.","status":"active","version":"0.9.1","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","typescript"],"install":[{"cmd":"npm install react-cc-number-formatter","lang":"bash","label":"npm"},{"cmd":"yarn add react-cc-number-formatter","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-cc-number-formatter","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React component usage","package":"react","optional":false}],"imports":[{"note":"Named export, not default. TypeScript types are included.","wrong":"import CreditCardNumberFormatter from 'react-cc-number-formatter'","symbol":"CreditCardNumberFormatter","correct":"import { CreditCardNumberFormatter } from 'react-cc-number-formatter'"},{"note":"TypeScript type, use 'import type' to avoid runtime error.","wrong":"import { CreditCard } from 'react-cc-number-formatter'","symbol":"CreditCard","correct":"import type { CreditCard } from 'react-cc-number-formatter'"},{"note":"TypeScript type, not available at runtime. Use ESM import type.","wrong":"const { CreditCardInfo } = require('react-cc-number-formatter')","symbol":"CreditCardInfo","correct":"import type { CreditCardInfo } from 'react-cc-number-formatter'"},{"note":"TypeScript type alias, not a value. Must use 'import type'.","wrong":"import { BrandType } from 'react-cc-number-formatter'","symbol":"BrandType","correct":"import type { BrandType } from 'react-cc-number-formatter'"}],"quickstart":{"code":"import React, { useState } from 'react';\nimport { CreditCardNumberFormatter, CreditCard } from 'react-cc-number-formatter';\n\nfunction App() {\n  const [creditCard, setCreditCard] = useState<CreditCard>({\n    number: '',\n    mm: '',\n    yy: '',\n    cvv: ''\n  });\n\n  return (\n    <CreditCardNumberFormatter\n      creditCard={creditCard}\n      onCreditCardChange={(cc, info) => {\n        setCreditCard(cc);\n        if (info.complete && info.luhn) {\n          console.log('Card valid and complete');\n        }\n      }}\n    >\n      {(cc, emitChange) => (\n        <div>\n          <input\n            value={cc.number}\n            onChange={e => emitChange({ ...cc, number: e.target.value })}\n            placeholder=\"Card number\"\n          />\n          <input\n            value={cc.mm}\n            onChange={e => emitChange({ ...cc, mm: e.target.value })}\n            placeholder=\"MM\"\n          />\n          <input\n            value={cc.yy}\n            onChange={e => emitChange({ ...cc, yy: e.target.value })}\n            placeholder=\"YY\"\n          />\n          <input\n            value={cc.cvv}\n            onChange={e => emitChange({ ...cc, cvv: e.target.value })}\n            placeholder=\"CVV\"\n          />\n        </div>\n      )}\n    </CreditCardNumberFormatter>\n  );\n}\n\nexport default App;","lang":"typescript","description":"Minimal usage of CreditCardNumberFormatter with all card fields, Luhn validation, and render-prop pattern."},"warnings":[{"fix":"Always provide default state with all fields: { number: '', mm: '', yy: '', cvv: '' }","message":"The `creditCard` object must include all four fields (number, mm, yy, cvv) even if empty.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Always spread existing state: emitChange({ ...creditCard, number: newValue })","message":"`emitChange` must be called with a full `CreditCard` object; partial updates can break internal state.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Expect returned number to be unformatted. If you need display value, read from the `creditCard` render-prop argument.","message":"`number` field in `creditCard` passed in prop is formatted with spaces internally, but `onCreditCardChange` returns number without spaces.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Use import type { CreditCard } from 'react-cc-number-formatter' – no subpaths.","message":"TypeScript types are exported but not re-exported from a barrel file; direct import paths required.","severity":"gotcha","affected_versions":">=0.0.0"}],"env_vars":null,"search_vec":"'0.9.1':23 'adapt':8 'agnost':57 'altern':59 'block':40 'brand':77 'card':3,16,30,64,75 'complet':78 'compon':9 'credit':2,15,63,74 'current':19 'depend':81 'detail':73 'digit':36 'e.g':60 'everi':34 'field':45,80 'form':17 'format':11,29,67 'formatt':5 'four':35 'info':76 'input':18,42 'invalid':41 'javascript':85 'licens':27 'logic':68 'luhn':38 'manag':14 'mit':26 'mm/yy/cvv':44 'number':4,31 'pattern':52 'per':79 'perform':37 'prop':51 'provid':72 'react':1,7,62,83 'react-credit-card':61 'releas':24 'render':50 'render-prop':49 'separ':66 'space':33 'stabl':20 'style':56 'styling-agnost':55 'typescript':86 'ui':70 'unlik':58 'use':47 'valid':12,39 'version':21","created_at":"2026-06-04T18:54:17.048845+00:00","updated_at":"2026-06-04T18:54:17.048845+00:00","problems":[{"fix":"import { CreditCardNumberFormatter } from 'react-cc-number-formatter'","cause":"Using default import instead of named import.","error":"Attempted import error: 'CreditCardNumberFormatter' is not exported from 'react-cc-number-formatter'."},{"fix":"Provide object with number, mm, yy, cvv: { number: '', mm: '', yy: '', cvv: '' }","cause":"Initial creditCard prop does not contain all required fields.","error":"TypeError: Cannot read properties of undefined (reading 'number')"},{"fix":"Do not spread creditCardInfo onto a DOM element; use it programmatically.","cause":"Passing creditCardInfo properties as JSX attributes on a DOM element.","error":"Warning: Received `true` for a non-boolean attribute `complete`."},{"fix":"npm install react-cc-number-formatter","cause":"Package not installed.","error":"Module not found: Can't resolve 'react-cc-number-formatter'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null,"cli_version":null,"type":"library","homepage":null,"github":null,"docs":null,"changelog":null,"pypi":null,"npm":"react-cc-number-formatter","openapi_spec":null,"status_page":null,"smithery":null,"categories":["payments"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-04","next_check":"2026-09-02","install_tag":null}}