{"id":16403633,"url":"https://github.com/coderdiaz/react-card-brand","last_synced_at":"2025-10-16T10:38:43.850Z","repository":{"id":107873033,"uuid":"229297020","full_name":"coderdiaz/react-card-brand","owner":"coderdiaz","description":"A zero-dependency React Hook to show the brand from a card type.","archived":false,"fork":false,"pushed_at":"2023-08-07T23:12:24.000Z","size":130,"stargazers_count":10,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-17T20:12:06.826Z","etag":null,"topics":["card-brand","credit-card-validation","creditcard","react","react-hooks"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/coderdiaz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-12-20T16:13:56.000Z","updated_at":"2023-07-28T01:53:43.000Z","dependencies_parsed_at":"2024-10-28T09:16:36.259Z","dependency_job_id":"6c4003e2-e552-469a-8362-c04dc0e50c89","html_url":"https://github.com/coderdiaz/react-card-brand","commit_stats":{"total_commits":13,"total_committers":3,"mean_commits":4.333333333333333,"dds":"0.15384615384615385","last_synced_commit":"02c680897e7ba96024970738670073ea45b7fe99"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coderdiaz%2Freact-card-brand","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coderdiaz%2Freact-card-brand/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coderdiaz%2Freact-card-brand/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coderdiaz%2Freact-card-brand/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/coderdiaz","download_url":"https://codeload.github.com/coderdiaz/react-card-brand/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244725866,"owners_count":20499682,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["card-brand","credit-card-validation","creditcard","react","react-hooks"],"created_at":"2024-10-11T05:49:55.883Z","updated_at":"2025-10-16T10:38:38.797Z","avatar_url":"https://github.com/coderdiaz.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Card Brand\n\n\u003e A zero-dependency React Hook to show and get the brand from a card type.\n\n## Installation\n\n```sh\n$ npm i -S react-card-brand\n```\n\nor install with Yarn if you prefer:\n\n```sh\nyarn add react-card-brand\n```\n\n## Usage\n\nYou can import `useCardBrand` into your component and use the `getSvgProps` callback to get a current brand from your card type.\n\n```js\nimport React from 'react';\nimport { useCardBrand, images } from 'react-card-brand';\n\nexport default function Example() {\n  const { getSvgProps } = useCardBrand();\n\n  return (\n    \u003cdiv\u003e\n      \u003csvg {...getSvgProps({ type: 'visa', images })} /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n### Get the brand from a card number\n\nYou can use the `getCardType` function to get the brand from a card number.\n\n```js\nimport React from 'react';\nimport { useCardBrand, images } from 'react-card-brand';\n\nexport default function Example() {\n  const { getSvgProps, getCardBrand } = useCardBrand();\n  const type = getCardBrand('4242424242424242');\n\n  return (\n    \u003cdiv\u003e\n      \u003csvg {...getSvgProps({ type, images })} /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n## Community\n\nAll feedback and suggestions are welcome!\n\n## License\n\nThis is a open-source software licensed under the [MIT license](https://raw.githubusercontent.com/coderdiaz/react-card-brand/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoderdiaz%2Freact-card-brand","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcoderdiaz%2Freact-card-brand","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoderdiaz%2Freact-card-brand/lists"}