A zero-dependency React Hook to show and get the brand from a card type.
$ npm i -S react-card-brandor install with Yarn if you prefer:
yarn add react-card-brandYou can import useCardBrand into your component and use the getSvgProps callback to get a current brand from your card type.
import React from 'react'; import { useCardBrand, images } from 'react-card-brand'; export default function Example() { const { getSvgProps } = useCardBrand(); return ( <div> <svg {...getSvgProps({ type: 'visa', images })} /> </div> ); }You can use the getCardType function to get the brand from a card number.
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> ); }All feedback and suggestions are welcome!
This is a open-source software licensed under the MIT license