react-cardify

Cardify

A flexible and highly customizable React component for credit card input, capable of masking, formatting, and detecting card types.

Features

• 🎨 Render prop pattern for ultimate customization
• 🔒 Masking for security
• 📋 Automatically formats as you type
• 🎴 Detects card type (e.g., Visa, MasterCard, Amex)
• 🌐 ARIA accessible

Installation

npm install --save react-cardify
yarn add react-cardify
pnpm add react-cardify
bun install react-cardify

Usage

Uncontrolled

import { Cardify } from "react-cardify";

export default function Home() {
  return (
    <Cardify
      render={({
        value,
        onChange,
        onFocus,
        onBlur,
        placeholder,
        unmaskedValue,
        cardType,
      }) => {
        console.log("value", value);
        console.log("unmaskedValue", unmaskedValue);
        console.log("cardType", cardType);
        return (
          <input
            value={value}
            onChange={onChange}
            onFocus={onFocus}
            onBlur={onBlur}
            placeholder={placeholder}
          />
        );
      }}
    />
  );
}

Controlled

import { useState } from "react";
import { Cardify } from "react-cardify";

export default function Home() {
  const defaultValue = "95827712367284";
  const [controlledValue, setControlledValue] = useState(defaultValue);

  return (
    <_Cardify
      value={controlledValue}
      onChange={({ event, value }: { event: any, value: string }) =>
        setControlledValue(value)
      }
      defaultValue={defaultValue}
      render={({
        value,
        onChange,
        onFocus,
        onBlur,
        unmaskedValue,
        cardType,
      }) => {
        return (
          <div>
            <input
              value={value}
              onChange={onChange}
              onFocus={onFocus}
              onBlur={onBlur}
            />
          </div>
        );
      }}
    />
  );
}

Props

Prop name	Type	Description	Default value
render	({ value, onChange, onFocus, onBlur, placeholder, unmaskedValue, cardType }) => React.ReactNode	Render prop for ultimate customization.	undefined
maskCharacter	string	The character to use for masking.	"•"
mask	bool	Whether to mask the input.	true
value	string	The value of the input.	""
defaultValue	{ cardNumber: string, cardType: string }	The default value of the input.	undefined
onChange	({ event, value }: { event: any, value: { cardNumber: string, cardType: string } }) => void	The function to call when the value changes.	undefined

Render prop arguments

Argument name	Type	Description	Default value
value	string	Value of the input is unmasked when focused and masked when blurred	""
onChange	func	The function to call when the value changes.	handleChange
onFocus	func	The function to call when the input is focused.	undefined
onBlur	func	The function to call when the input is blurred.	undefined
placeholder	string	The placeholder to display when the input is empty.	Enter card number
unmaskedValue	string	The unmasked value.	""
cardType	string	The card type.	""
ariaLabel	string	The aria label for the input.	""

License

This project is licensed under the MIT License - see the LICENSE file for details.

Dependencies

• react: React is a JavaScript library for building user interfaces.
• react-dom: React package for working with the DOM.