react-credit-cards-library
Version:
A lightweight, customizable React component library for rendering credit card forms with dynamic card issuer detection, input formatting, and responsive design. Built with TypeScript for type safety and flexibility.
175 lines (138 loc) • 5.19 kB
Markdown
# React Credit Cards Library
[](https://badge.fury.io/js/react-credit-cards-library)
[](https://opensource.org/licenses/MIT)
A modern, lightweight React library for displaying credit card components with flip animations, automatic issuer recognition, and a premium visual design.
## Features
- **Premium Visuals**: Includes a stunning "dark mode" with rich gradients and metallic chip effects.
- **Responsive**: Fully responsive with customizable size constraints.
- **Flip Animation**: Smooth 3D flip animation to show the CVC on the back.
- **Issuer Detection**: Automatically detects and displays logos for major card issuers.
- **TypeScript**: Built with modern TypeScript 5 for robust type safety.
- **Zero CSS Import**: All styles are inline/JS-based, so no need to import extra CSS files.
## Installation
Install the library using npm:
```bash
npm install react-credit-cards-library
```
## Usage
Here's a modern example of how to use the `CreditCard` component:
```tsx
import { useState } from "react";
import { CreditCard, type Focused } from "react-credit-cards-library";
const App = () => {
const [cardData, setCardData] = useState({
number: "",
name: "",
expiry: "",
cvc: "",
focus: "" as Focused,
});
return (
<div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "1rem" }}>
<CreditCard
number={cardData.number}
name={cardData.name}
expiry={cardData.expiry}
cvc={cardData.cvc}
focus={cardData.focus}
richColors={true} // Enable the premium dark gradient look
/>
<form>
<input
type="text"
name="number"
placeholder="Card Number"
value={cardData.number}
onChange={(e) => setCardData({ ...cardData, number: e.target.value })}
onFocus={() => setCardData({ ...cardData, focus: "number" })}
/>
<input
type="text"
name="name"
placeholder="Name"
value={cardData.name}
onChange={(e) => setCardData({ ...cardData, name: e.target.value })}
onFocus={() => setCardData({ ...cardData, focus: "name" })}
/>
<input
type="text"
name="expiry"
placeholder="MM/YY"
value={cardData.expiry}
onChange={(e) => setCardData({ ...cardData, expiry: e.target.value })}
onFocus={() => setCardData({ ...cardData, focus: "expiry" })}
/>
<input
type="text"
name="cvc"
placeholder="CVC"
value={cardData.cvc}
onChange={(e) => setCardData({ ...cardData, cvc: e.target.value })}
onFocus={() => setCardData({ ...cardData, focus: "cvc" })}
/>
</form>
</div>
);
};
export default App;
```
## Props
The `CreditCard` component accepts the following props:
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `number` | `string` | **Required** | The credit card number. |
| `name` | `string` | **Required** | The cardholder's name. |
| `expiry` | `string` | **Required** | The expiry date (e.g. "12/25"). |
| `cvc` | `string` | **Required** | The CVC/CVV code. |
| `focus` | `Focused` | **Required** | The field currently focused (`"number"`, `"name"`, `"expiry"`, `"cvc"`, or `""`). |
| `richColors` | `boolean` | `false` | Enables the premium dark gradient theme. |
| `locale` | `"en" \| "pt-BR" \| "es"` | `"en"` | Language for static text ("VALID THRU"). |
| `cardSizes` | `CardSizes` | *See below* | Custom dimensions for the card. |
### CardSizes Type
Use the `cardSizes` prop to override default dimensions:
```typescript
interface CardSizes {
width?: string; // Default: "320px"
height?: string; // Default: "180px"
maxWidth?: string; // Default: "100%"
maxHeight?: string; // Default: undefined
}
```
## Supported Issuers
The library automatically detects the following card brands:
- Visa
- Mastercard
- American Express (Amex)
- Diners Club
- Discover
- JCB
- Elo
- Alelo
- Sodexo
- VR
- Ticket (Restaurante/Alimentação)
## Development
To develop and build the library locally:
1. Clone the repository:
```bash
git clone https://github.com/pedrovs3/react-credit-card-library.git
cd react-credit-cards-library
```
2. Install dependencies:
```bash
npm install
```
3. Build the library:
```bash
npm run build
```
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## Contributing
Contributions are welcome! Please open an issue or submit a pull request for any bugs, improvements, or new features.
## Author
**Pedro Silva**
- [GitHub](https://github.com/pedrovs3)
- [LinkedIn](https://www.linkedin.com/in/pedrovs3)