https://github.com/coderdiaz/react-card-brand
A zero-dependency React Hook to show the brand from a card type.
https://github.com/coderdiaz/react-card-brand
card-brand credit-card-validation creditcard react react-hooks
Last synced: 8 months ago
JSON representation
A zero-dependency React Hook to show the brand from a card type.
- Host: GitHub
- URL: https://github.com/coderdiaz/react-card-brand
- Owner: coderdiaz
- License: mit
- Created: 2019-12-20T16:13:56.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2023-08-07T23:12:24.000Z (almost 3 years ago)
- Last Synced: 2025-03-17T20:12:06.826Z (about 1 year ago)
- Topics: card-brand, credit-card-validation, creditcard, react, react-hooks
- Language: TypeScript
- Homepage:
- Size: 127 KB
- Stars: 10
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Card Brand
> A zero-dependency React Hook to show and get the brand from a card type.
## Installation
```sh
$ npm i -S react-card-brand
```
or install with Yarn if you prefer:
```sh
yarn add react-card-brand
```
## Usage
You can import `useCardBrand` into your component and use the `getSvgProps` callback to get a current brand from your card type.
```js
import React from 'react';
import { useCardBrand, images } from 'react-card-brand';
export default function Example() {
const { getSvgProps } = useCardBrand();
return (
);
}
```
### Get the brand from a card number
You can use the `getCardType` function to get the brand from a card number.
```js
import React from 'react';
import { useCardBrand, images } from 'react-card-brand';
export default function Example() {
const { getSvgProps, getCardBrand } = useCardBrand();
const type = getCardBrand('4242424242424242');
return (
);
}
```
## Community
All feedback and suggestions are welcome!
## License
This is a open-source software licensed under the [MIT license](https://raw.githubusercontent.com/coderdiaz/react-card-brand/master/LICENSE)