feat: added support to get the card brand

Author: coderdiaz

README.md

@@ -1,6 +1,6 @@
 # React Card Brand
 
-> A zero-dependency React Hook to show the brand from a card type.
+> A zero-dependency React Hook to show and get the brand from a card type.
 
 ## Installation
 
@@ -33,6 +33,26 @@ export default function Example() {
 }
 ```
 
+### 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 (
+    <div>
+      <svg {...getSvgProps({ type, images })} />
+    </div>
+  );
+}
+```
+
 ## Community
 
 All feedback and suggestions are welcome!

src/useCardBrand.ts

@@ -1,31 +1,34 @@
 import * as React from 'react';
+import { getCardBrand } from './utils/validation';
 
 interface UseCardBrandProps {
   images?: {
     [key: string]: React.ReactNode | JSX.Element;
   };
+  cardNumber?: string;
   ariaLabel?: string;
-  type?: string;
 }
 
 export default function useCardBrand() {
   const getSvgProps = React.useCallback((props: UseCardBrandProps = {}) => {
-    const images = props.images || {};
+    const images = props.images ?? {};
+    const type = 'placeholder';
 
     return React.useMemo(
       () => ({
         'aria-label': props.ariaLabel ?? 'Placeholder card',
-        children: images[props.type ?? 'placeholder'] || images,
+        children: images[type] || images,
         width: '1.5em',
         height: '1em',
         viewBox: '0 0 24 16',
         ...props,
       }),
-      [props.ariaLabel, props.type],
+      [props],
     );
   }, []);
 
   return {
     getSvgProps,
+    getCardBrand,
   };
 }

src/utils/validation.ts

@@ -0,0 +1,50 @@
+enum CardType {
+  Visa = 'visa',
+  Mastercard = 'mastercard',
+  Amex = 'amex',
+  Diners = 'diners',
+  Discover = 'discover',
+}
+
+type CardTypeConfig = { size: number[]; prefixes: string[] };
+type CardTypes = { [key in CardType]: CardTypeConfig };
+
+const options: CardTypes = {
+  visa: { size: [13, 16], prefixes: ['4'] },
+  mastercard: { size: [16], prefixes: ['51', '52', '53', '54', '55'] },
+  amex: { size: [15], prefixes: ['34', '37'] },
+  diners: {
+    size: [14],
+    prefixes: ['300', '301', '302', '303', '304', '305', '36', '38'],
+  },
+  discover: {
+    size: [16],
+    prefixes: ['6011', '644', '645', '646', '647', '648', '649', '65'],
+  },
+};
+
+/**
+ * Returns the card type based on the card number
+ * Accepts different formats of card number:
+ * - 4242 4242 4242 4242
+ * - 4242-4242-4242-4242
+ * - 4242424242424242
+ * @param cardNumber {string} - The card number to be validated
+ * @returns The card type name
+ */
+export const getCardBrand = (cardNumber: string) => {
+  const formattedNumber = cardNumber.replace(/[ -]/g, ''); // Removing spaces from the card number
+  const validateCode = formattedNumber.substring(0, 4); // Getting the first four gits of the card number
+
+  for (const [option, config] of Object.entries(options)) {
+    const { size, prefixes } = config;
+    if (size.includes(formattedNumber.length)) {
+      const testCard = new RegExp(`^(${prefixes.join('|')})`);
+      if (testCard.test(validateCode)) {
+        return option;
+      }
+    }
+  }
+
+  return 'placeholder';
+};