{"id":38591063,"url":"https://github.com/devmehq/react-qr-code","last_synced_at":"2026-01-17T08:24:04.775Z","repository":{"id":37049026,"uuid":"438342988","full_name":"devmehq/react-qr-code","owner":"devmehq","description":"A QRCode React Component ( SVG / Canvas )","archived":false,"fork":false,"pushed_at":"2025-09-06T17:31:18.000Z","size":4846,"stargazers_count":12,"open_issues_count":8,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-09-06T19:24:23.526Z","etag":null,"topics":["qr-code","react","react-qr-code","react-qr-code-generator"],"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/devmehq.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":"meabed"}},"created_at":"2021-12-14T17:32:00.000Z","updated_at":"2025-08-11T14:37:34.000Z","dependencies_parsed_at":"2023-09-24T09:49:30.725Z","dependency_job_id":"5caf004b-7962-40d5-89ca-f1eea40a91d2","html_url":"https://github.com/devmehq/react-qr-code","commit_stats":{"total_commits":344,"total_committers":6,"mean_commits":"57.333333333333336","dds":0.5058139534883721,"last_synced_commit":"3c998465b7dd34922d6bbf9c0deadd54dd8d2bcd"},"previous_names":[],"tags_count":203,"template":false,"template_full_name":null,"purl":"pkg:github/devmehq/react-qr-code","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devmehq%2Freact-qr-code","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devmehq%2Freact-qr-code/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devmehq%2Freact-qr-code/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devmehq%2Freact-qr-code/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devmehq","download_url":"https://codeload.github.com/devmehq/react-qr-code/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devmehq%2Freact-qr-code/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28504363,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-17T06:57:29.758Z","status":"ssl_error","status_checked_at":"2026-01-17T06:56:03.931Z","response_time":85,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["qr-code","react","react-qr-code","react-qr-code-generator"],"created_at":"2026-01-17T08:24:04.650Z","updated_at":"2026-01-17T08:24:04.741Z","avatar_url":"https://github.com/devmehq.png","language":"TypeScript","readme":"# @devmehq/react-qr-code\n\n🎯 Simple \u0026 Advanced React component to generate [QR codes](http://en.wikipedia.org/wiki/QR_code) with custom styling, multiple render formats, and image embedding support.\n\n[![NPM version](https://badgen.net/npm/v/@devmehq/react-qr-code)](https://npm.im/@devmehq/react-qr-code)\n[![Build Status](https://github.com/devmehq/react-qr-code/workflows/CI/badge.svg)](https://github.com/devmehq/react-qr-code/actions)\n[![Downloads](https://img.shields.io/npm/dm/@devmehq/react-qr-code.svg)](https://www.npmjs.com/package/@devmehq/react-qr-code)\n[![Bundle Size](https://badgen.net/bundlephobia/minzip/@devmehq/react-qr-code)](https://bundlephobia.com/package/@devmehq/react-qr-code)\n[![License](https://badgen.net/npm/license/@devmehq/react-qr-code)](https://github.com/devmehq/react-qr-code/blob/master/LICENSE.md)\n[![UNPKG](https://img.shields.io/badge/UNPKG-OK-179BD7.svg)](https://unpkg.com/browse/@devmehq/react-qr-code@latest/)\n\n[![Edit react-qr-code-demo](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-qr-code-demo-ccho5l?fontsize=14\u0026hidenavigation=1\u0026theme=dark)\n\n## ✨ Features\n\n- 🎨 **Customizable**: Colors, sizes, margins, and styles\n- 🖼️ **Multiple Formats**: Render as SVG or Canvas\n- 📱 **Responsive**: Scales perfectly on all devices\n- 🏞️ **Image Embedding**: Add logos or images to QR codes\n- 🛡️ **Error Correction**: Four levels (L, M, Q, H)\n- 📦 **Lightweight**: Zero dependencies, small bundle size\n- 🔧 **TypeScript**: Full TypeScript support\n- ⚡ **Performance**: Optimized rendering with React hooks\n\n## 📦 Installation\n\n```bash\n# Using npm\nnpm install @devmehq/react-qr-code\n\n# Using yarn\nyarn add @devmehq/react-qr-code\n\n# Using pnpm\npnpm add @devmehq/react-qr-code\n```\n\n## 🚀 Quick Start\n\n### Basic Usage\n\n```tsx\nimport React from 'react'\nimport { ReactQrCode } from '@devmehq/react-qr-code'\n\nfunction App() {\n  return \u003cReactQrCode value=\"https://github.com/devmehq/react-qr-code\" /\u003e\n}\n```\n\n### With Custom Styling\n\n```tsx\nimport React from 'react'\nimport { ReactQrCode } from '@devmehq/react-qr-code'\n\nfunction StyledQRCode() {\n  return (\n    \u003cReactQrCode\n      value=\"https://your-website.com\"\n      size={300}\n      bgColor=\"#f3f4f6\"\n      fgColor=\"#1f2937\"\n      level=\"H\"\n      marginSize={4}\n      style={{ borderRadius: '8px' }}\n      className=\"shadow-lg\"\n    /\u003e\n  )\n}\n```\n\n### Canvas Rendering\n\n```tsx\nimport React from 'react'\nimport { ReactQrCode } from '@devmehq/react-qr-code'\n\nfunction CanvasQRCode() {\n  return (\n    \u003cReactQrCode\n      value=\"https://your-website.com\"\n      renderAs=\"canvas\"\n      size={256}\n    /\u003e\n  )\n}\n```\n\n### With Logo/Image\n\n```tsx\nimport React from 'react'\nimport { ReactQrCode } from '@devmehq/react-qr-code'\n\nfunction QRCodeWithLogo() {\n  return (\n    \u003cReactQrCode\n      value=\"https://your-website.com\"\n      size={256}\n      images={[\n        {\n          src: '/logo.png',\n          height: 50,\n          width: 50,\n          excavate: true,\n        },\n      ]}\n    /\u003e\n  )\n}\n```\n\n## 📖 API Reference\n\n### ReactQrCode Props\n\n| Prop         | Type                       | Default      | Description                             |\n| ------------ | -------------------------- | ------------ | --------------------------------------- |\n| `value`      | `string`                   | **Required** | The value to encode in the QR code      |\n| `renderAs`   | `'svg' \\| 'canvas'`        | `'svg'`      | Render format (SVG or Canvas)           |\n| `size`       | `number`                   | `256`        | Size of the QR code in pixels           |\n| `bgColor`    | `string`                   | `'#ffffff'`  | Background color (CSS color value)      |\n| `fgColor`    | `string`                   | `'#000000'`  | Foreground color (CSS color value)      |\n| `level`      | `'L' \\| 'M' \\| 'Q' \\| 'H'` | `'L'`        | Error correction level                  |\n| `marginSize` | `number`                   | `0`          | Margin around the QR code in pixels     |\n| `style`      | `CSSProperties`            | `undefined`  | React style object                      |\n| `className`  | `string`                   | `undefined`  | CSS class name                          |\n| `title`      | `string`                   | `undefined`  | Title for SVG accessibility             |\n| `id`         | `string`                   | `undefined`  | HTML id attribute                       |\n| `images`     | `ReactQrCodeImageProps[]`  | `undefined`  | Array of images to embed in the QR code |\n\n### ReactQrCodeImageProps\n\n| Property   | Type      | Default        | Description                                  |\n| ---------- | --------- | -------------- | -------------------------------------------- |\n| `src`      | `string`  | **Required**   | Image source URL                             |\n| `x`        | `number`  | Auto-centered  | X position of the image                      |\n| `y`        | `number`  | Auto-centered  | Y position of the image                      |\n| `height`   | `number`  | 10% of QR size | Height of the image                          |\n| `width`    | `number`  | 10% of QR size | Width of the image                           |\n| `excavate` | `boolean` | `false`        | Whether to clear QR modules behind the image |\n\n### Error Correction Levels\n\n| Level | Error Correction | Data Capacity |\n| ----- | ---------------- | ------------- |\n| `L`   | ~7%              | High          |\n| `M`   | ~15%             | Medium        |\n| `Q`   | ~25%             | Medium-Low    |\n| `H`   | ~30%             | Low           |\n\n## 🎨 Styling \u0026 Customization\n\n### Responsive Design\n\n```tsx\nimport React from 'react'\nimport { ReactQrCode } from '@devmehq/react-qr-code'\n\nfunction ResponsiveQRCode() {\n  return (\n    \u003cdiv style={{ width: '100%', maxWidth: '400px' }}\u003e\n      \u003cReactQrCode\n        value=\"https://your-website.com\"\n        size={256}\n        style={{ width: '100%', height: 'auto' }}\n      /\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n### Dark Mode Support\n\n```tsx\nimport React from 'react'\nimport { ReactQrCode } from '@devmehq/react-qr-code'\n\nfunction DarkModeQRCode({ isDarkMode }) {\n  return (\n    \u003cReactQrCode\n      value=\"https://your-website.com\"\n      bgColor={isDarkMode ? '#1f2937' : '#ffffff'}\n      fgColor={isDarkMode ? '#f3f4f6' : '#000000'}\n    /\u003e\n  )\n}\n```\n\n### Custom CSS Classes\n\n```tsx\nimport React from 'react'\nimport { ReactQrCode } from '@devmehq/react-qr-code'\nimport './styles.css'\n\nfunction CustomStyledQRCode() {\n  return (\n    \u003cReactQrCode\n      value=\"https://your-website.com\"\n      className=\"qr-code-custom\"\n      size={300}\n    /\u003e\n  )\n}\n```\n\n```css\n/* styles.css */\n.qr-code-custom {\n  border-radius: 16px;\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n  padding: 16px;\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n}\n```\n\n**Note:** When using `renderAs=\"canvas\"` on high-density displays, the canvas is scaled for pixel-perfect rendering. Custom styles are merged with internal scaling styles.\n\n## 💡 Use Cases\n\n### WiFi Password Sharing\n\n```tsx\nfunction WiFiQRCode({ ssid, password, security = 'WPA' }) {\n  const wifiString = `WIFI:T:${security};S:${ssid};P:${password};;`\n\n  return \u003cReactQrCode value={wifiString} size={256} level=\"H\" /\u003e\n}\n```\n\n### Contact Information (vCard)\n\n```tsx\nfunction ContactQRCode({ name, phone, email }) {\n  const vCard = `BEGIN:VCARD\nVERSION:3.0\nFN:${name}\nTEL:${phone}\nEMAIL:${email}\nEND:VCARD`\n\n  return \u003cReactQrCode value={vCard} size={256} level=\"M\" /\u003e\n}\n```\n\n### Two-Factor Authentication\n\n```tsx\nfunction TwoFactorQRCode({ secret, issuer, accountName }) {\n  const otpauth = `otpauth://totp/${issuer}:${accountName}?secret=${secret}\u0026issuer=${issuer}`\n\n  return (\n    \u003cReactQrCode\n      value={otpauth}\n      size={256}\n      level=\"H\"\n      images={[\n        {\n          src: '/logo.png',\n          height: 40,\n          width: 40,\n          excavate: true,\n        },\n      ]}\n    /\u003e\n  )\n}\n```\n\n### Payment Links\n\n```tsx\nfunction PaymentQRCode({ amount, recipient, currency = 'USD' }) {\n  const paymentLink = `https://pay.example.com/?to=${recipient}\u0026amount=${amount}\u0026currency=${currency}`\n\n  return \u003cReactQrCode value={paymentLink} size={300} level=\"H\" marginSize={4} /\u003e\n}\n```\n\n\u003cimg src=\"https://github.com/devmehq/react-qr-code/raw/master/examples/qrcode-demo.png\" alt=\"qrcode-demo\"\u003e\n\n## 🧪 Testing\n\n```bash\n# Run tests\nyarn test\n\n# Run tests in watch mode\nyarn test:watch\n\n# Generate coverage report\nyarn test:coverage\n```\n\n## 🔧 Development\n\n```bash\n# Install dependencies\nyarn install\n\n# Build the library\nyarn build\n\n# Run linting\nyarn lint-js\n\n# Format code\nyarn prettier\n```\n\n## 🤝 Contributing\n\nContributions are welcome! Please read our [Contributing Guide](CONTRIBUTING.md) for details on our code of conduct and the process for submitting pull requests.\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'Add some amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n## 📝 Roadmap\n\n- [ ] Download QR code as image (PNG/JPEG/SVG)\n- [ ] Share QR code functionality\n- [ ] Server-side rendering (SSR) support\n- [ ] Corner dot customization\n- [ ] Gradient color support\n- [ ] Custom shape modules (dots, rounded, etc.)\n- [ ] Animation support\n- [ ] Batch QR code generation\n- [ ] QR code scanner component\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE.md) file for details.\n\n## 🙏 Acknowledgments\n\n- QR Code is a registered trademark of DENSO WAVE INCORPORATED\n- Built with ❤️ by the [DEV.ME](https://dev.me) team\n- Inspired by the QR code specification and community feedback\n\n## 📧 Support\n\nFor support, email support@dev.me or open an issue on [GitHub](https://github.com/devmehq/react-qr-code/issues).\n\n---\n\n\u003cdiv align=\"center\"\u003e\n  Made with ❤️ by \u003ca href=\"https://dev.me\"\u003eDEV.ME\u003c/a\u003e\n\u003c/div\u003e\n","funding_links":["https://github.com/sponsors/meabed"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevmehq%2Freact-qr-code","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevmehq%2Freact-qr-code","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevmehq%2Freact-qr-code/lists"}