React-cardify NPM

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.	`""`