{"id":24455540,"url":"https://github.com/nixjs/qrcode-react","last_synced_at":"2026-04-12T09:37:24.520Z","repository":{"id":62388347,"uuid":"559837177","full_name":"nixjs/qrcode-react","owner":"nixjs","description":"A React component to generate QRCode.","archived":false,"fork":false,"pushed_at":"2022-10-31T08:29:27.000Z","size":5,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-05T17:51:13.797Z","etag":null,"topics":["javascript","qrcode","qrcode-generator","qrcode-react","react","typescript","web"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nixjs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-10-31T07:44:00.000Z","updated_at":"2022-10-31T08:31:36.000Z","dependencies_parsed_at":"2022-11-01T01:45:35.178Z","dependency_job_id":null,"html_url":"https://github.com/nixjs/qrcode-react","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nixjs%2Fqrcode-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nixjs%2Fqrcode-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nixjs%2Fqrcode-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nixjs%2Fqrcode-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nixjs","download_url":"https://codeload.github.com/nixjs/qrcode-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243544668,"owners_count":20308168,"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":["javascript","qrcode","qrcode-generator","qrcode-react","react","typescript","web"],"created_at":"2025-01-21T02:13:41.418Z","updated_at":"2025-12-29T09:13:44.560Z","avatar_url":"https://github.com/nixjs.png","language":"TypeScript","readme":"# @nixjs23n6/qrcode-react\n\nA React component to generate QRCode.\n\n## Install\n\n```typescript\nyarn add @nixjs23n6/qrcode-react\n```\n\n## Interface\n\n```typescript\n\nexport interface QRCodePropArg {\n    value: string\n    ecLevel?: 'L' | 'M' | 'Q' | 'H'\n    enableCORS?: boolean\n    size?: number\n    margin?: number\n    bgColor?: string\n    fgColor?: string\n    qrStyle?: 'squares' | 'dots'\n    imageSettings?: ImageSettings\n    className?: string\n}\n\nexport interface ImageSettings {\n    image?: string\n    opacity?: number\n    height?: number\n    width?: number\n}\n```\n\n### `value`\n\nThe value of the QR code. **[Required]**\n\n### `ecLevel`\n\nQR codes support four levels of error correction to enable recovery of missing, misread, or obscured data. Greater redundancy is achieved at the cost of being able to store less data.  Know more, [wikipedia: QR_code](https://en.wikipedia.org/wiki/QR_code#Error_correction).\n\nPossible levels are shown below:\n\n| Level            | Error resistance |\n|------------------|:----------------:|\n| **L** (Low)      | **~7%**          |\n| **M** (Medium)   | **~15%**         |\n| **Q** (Quartile) | **~25%**         |\n| **H** (High)     | **~30%**         |\n\n**Default**: `M`\n\n### `enableCORS`\n\nAllowing cross-origin use of images and canvas.**Default**: `false`\n\n### `size`\n\nImage size.**Default**: `125`\n\n### `margin`\n\nThe width of the white border around the data portion of the code.**Default**: `15`\n\n### `bgColor`\n\nThe background color of QRcode.**Default**: `#FFFFFF`\n\n### `fgColor`\n\nThe foreground color of QRcode.**Default**: `#000000`\n\n### `qrStyle`\n\nStyle QRcode: `'squares' | 'dots'`.**Default**: `squares`\n\n### `imageSettings`\n\nAllow user to add logo on QRcode.**Default**: `{ opacity: 1, height: 30, width: 30, image: '' }`\n\n```typescript\nexport interface ImageSettings {\n    image?: string\n    opacity?: number\n    height?: number\n    width?: number\n}\n```\n\n#### `ImageSettings.image`\n\nLogo Image Path or Base64 encoded image.\n\n#### `ImageSettings.opacity`\n\nSet opacity for logo.\n\n#### `ImageSettings.height`\n\nfixed logo height.\n\n#### `ImageSettings.width`\n\nFixed logo width.\n\n### `className`\n\nAdditional CSS class names to add to the container.\n\n## Example\n\n```typescript\nimport { QRCode } from \"@nixjs23n6/qrcode-react\"\nexport const Render = () =\u003e \u003cQRCode value=\"0x2fEC6379E9a0B88D7c4C0BdC20adcFC7A23C3B68\"\n                imageSettings={{image: 'https:\\\\cdn.demo.com/busd.svg'}}\n                bgColor=\"#e7e7e7\"\n                className=\"qrcode-my-address\"\n            /\u003e\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnixjs%2Fqrcode-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnixjs%2Fqrcode-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnixjs%2Fqrcode-react/lists"}