{"id":31560968,"url":"https://github.com/guilhermeasn/react-qrcode-pretty","last_synced_at":"2025-10-05T02:18:54.605Z","repository":{"id":54473105,"uuid":"522300585","full_name":"guilhermeasn/react-qrcode-pretty","owner":"guilhermeasn","description":"Qrcode generator for react apps with many customization options.","archived":false,"fork":false,"pushed_at":"2025-07-12T13:13:25.000Z","size":8858,"stargazers_count":27,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-09-15T12:42:17.204Z","etag":null,"topics":["pretty","qrcode","react"],"latest_commit_sha":null,"homepage":"https://qrcodepretty.gn.dev.br/","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/guilhermeasn.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,"zenodo":null}},"created_at":"2022-08-07T19:05:46.000Z","updated_at":"2025-09-14T13:27:30.000Z","dependencies_parsed_at":"2025-05-07T00:21:50.228Z","dependency_job_id":"3a7b4359-1496-4546-ba76-673307afe13c","html_url":"https://github.com/guilhermeasn/react-qrcode-pretty","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/guilhermeasn/react-qrcode-pretty","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guilhermeasn%2Freact-qrcode-pretty","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guilhermeasn%2Freact-qrcode-pretty/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guilhermeasn%2Freact-qrcode-pretty/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guilhermeasn%2Freact-qrcode-pretty/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/guilhermeasn","download_url":"https://codeload.github.com/guilhermeasn/react-qrcode-pretty/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guilhermeasn%2Freact-qrcode-pretty/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278399693,"owners_count":25980333,"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","status":"online","status_checked_at":"2025-10-05T02:00:06.059Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["pretty","qrcode","react"],"created_at":"2025-10-05T02:18:53.675Z","updated_at":"2025-10-05T02:18:54.598Z","avatar_url":"https://github.com/guilhermeasn.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-qrcode-pretty\n\n[![pages-build-deployment](https://github.com/guilhermeasn/react-qrcode-pretty/actions/workflows/pages/pages-build-deployment/badge.svg?branch=example)](https://guilhermeasn.github.io/react-qrcode-pretty/)\n[![downloads](https://img.shields.io/npm/dt/react-qrcode-pretty)](https://www.npmjs.com/package/react-qrcode-pretty/)\n[![npm](https://img.shields.io/npm/v/react-qrcode-pretty.svg)](https://www.npmjs.com/package/react-qrcode-pretty/v/latest)\n\nQrcode generator for react apps with many customization options.\n\n![Qrcode example](https://raw.githubusercontent.com/guilhermeasn/react-qrcode-pretty/master/examples/qrcode_website.png)\n\n[Qrcode generator website](https://guilhermeasn.github.io/react-qrcode-pretty/)\n\n## Installation\n\nRun the command below in the terminal to install **react-qrcode-pretty** in your project\n\n```\nnpm i react-qrcode-pretty\n```\n\nOr with Yarn\n\n```\nyarn add react-qrcode-pretty\n```\n\n## Resources\n\n- **QrcodeCanvas**: React Element to generate a Qrcode with canvas.\n- **QrcodeSVG**: React Element to generate a Qrcode with SVG.\n- **useQrcodeDownload**: React Hook to download Qrcode in browser.\n\n## Qrcode Props\n\n|Prop|Type|Default|Details|\n|---|---|---|---|\n| value | `string` | | Qrcode payload (required) |\n| size | `number` | auto | Size of the qrcode without margin and padding |\n| color | `string` \u003cbr /\u003e `{ 'eyes': string, 'body': string }` | '#000000' | Foreground color for the entire qrcode or for each part (eyes and body) of the qrcode |\n| colorEffect | `gradient-dark-vertical` \u003cbr /\u003e `gradient-dark-horizontal` \u003cbr /\u003e `gradient-dark-diagonal` \u003cbr /\u003e `gradient-light-vertical` \u003cbr /\u003e `gradient-light-horizontal` \u003cbr /\u003e `gradient-light-diagonal` \u003cbr /\u003e `colored` \u003cbr /\u003e `shades` \u003cbr /\u003e `none` \u003cbr /\u003e `{ 'eyes': colorEffect, 'body': colorEffect }` | 'none' | Apply effects to coloring |\n| mode | `Numeric` \u003cbr /\u003e `Alphanumeric` \u003cbr /\u003e `Byte` \u003cbr /\u003e `Kanji` | 'Byte' | Mode that payload (value) will be logged |\n| level | `L` \u003cbr /\u003e `M` \u003cbr /\u003e `Q` \u003cbr /\u003e `H` | 'M' | Error correction level |\n| modules | `[0-40]` | 0 | Number of qrcode modules. 0 is auto |\n| image | `string` \u003cbr /\u003e `{ src: string; width ?: number; height ?: number; positionX ?: number; positionY ?: number; overlap ?: boolean; }` | undefined | Settings for the image to be inserted into the qrcode |\n| margin | `number` | 0 | Margin size. Area without background color |\n| padding | `number` | 0 | Padding size. Area with background color |\n| variant | `standard` \u003cbr /\u003e `rounded`  \u003cbr /\u003e `dots` \u003cbr /\u003e `circle` \u003cbr /\u003e `fluid` \u003cbr /\u003e `reverse` \u003cbr /\u003e `shower` \u003cbr /\u003e `gravity`  \u003cbr /\u003e `morse` \u003cbr /\u003e `italic` \u003cbr /\u003e `inclined` \u003cbr /\u003e `{ 'eyes': variant, 'body': variant }` | 'standard' | Style applied to the entire qrcode or each part (eyes and body) of it |\n| divider | `boolean` | false | Active a small separation between the qrcode body points |\n| bgColor | `string` | '#FFFFFF' | Background color |\n| bgRounded | `boolean` | false | Background color rounded |\n| internalProps | `HTMLAttributes\u003cHTMLCanvasElement \\| SVGSVGElements\u003e` | undefined | The internal props attributes |\n| onReady | `(element : HTMLCanvasElement \\| SVGSVGElements) =\u003e void` | undefined | Provides element properties and methods when available. To be used with the useQrcodeDownload hook. |\n\n## Code Example\n\n```js\nimport {\n    QrcodeCanvas, \n    useQrcodeDownload\n} from \"react-qrcode-pretty\";\n\nexport function QrcodeCustom({ value = 'react-qrcode-pretty' }) {\n\n    const [ setQrcode, download, isReady ] = useQrcodeDownload();\n\n    return (\n\n        \u003cdiv\u003e\n\n            \u003cQrcodeCanvas\n                value={ value }\n                variant={{\n                    eyes: 'gravity',\n                    body: 'fluid'\n                }}\n                color={{\n                    eyes: '#223344',\n                    body: '#335577'\n                }}\n                padding={ 20 }\n                margin={ 20 }\n                bgColor='#ddeeff'\n                onReady={ setQrcode }\n                bgRounded\n                divider\n            /\u003e\n\n            \u003cbr /\u003e\n\n            \u003cbutton\n                onClick={ () =\u003e download('qrcode_file_name') }\n                disabled={ !isReady }\n            \u003eDownload Qrcode\u003c/button\u003e\n\n        \u003c/div\u003e\n\n    );\n\n}\n\nexport default QrcodeCustom;\n```\n\n[Try it in the code sandbox](https://codesandbox.io/p/sandbox/tjxv5d)\n\n## Qrcode Examples\n\n![Qrcode example](https://raw.githubusercontent.com/guilhermeasn/react-qrcode-pretty/master/examples/qrcode_example_01.png)\n![Qrcode example](https://raw.githubusercontent.com/guilhermeasn/react-qrcode-pretty/master/examples/qrcode_example_02.png)\n![Qrcode example](https://raw.githubusercontent.com/guilhermeasn/react-qrcode-pretty/master/examples/qrcode_example_03.png)\n![Qrcode example](https://raw.githubusercontent.com/guilhermeasn/react-qrcode-pretty/master/examples/qrcode_example_04.png)\n![Qrcode example](https://raw.githubusercontent.com/guilhermeasn/react-qrcode-pretty/master/examples/qrcode_example_05.png)\n![Qrcode example](https://raw.githubusercontent.com/guilhermeasn/react-qrcode-pretty/master/examples/qrcode_example_06.png)\n![Qrcode example](https://raw.githubusercontent.com/guilhermeasn/react-qrcode-pretty/master/examples/qrcode_example_07.png)\n![Qrcode example](https://raw.githubusercontent.com/guilhermeasn/react-qrcode-pretty/master/examples/qrcode_example_08.png)\n![Qrcode example](https://raw.githubusercontent.com/guilhermeasn/react-qrcode-pretty/master/examples/qrcode_example_09.png)\n![Qrcode example](https://raw.githubusercontent.com/guilhermeasn/react-qrcode-pretty/master/examples/qrcode_example_10.png)\n\n[Qrcode generator website](https://guilhermeasn.github.io/react-qrcode-pretty/)\n\n## Author\n\n* **Guilherme Neves** - [github](https://github.com/guilhermeasn/) - [website](https://gn.dev.br/)\n\n## License\n\nThis project is under the MIT license - see file [LICENSE](https://github.com/guilhermeasn/react-qrcode-pretty/blob/master/LICENSE) for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fguilhermeasn%2Freact-qrcode-pretty","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fguilhermeasn%2Freact-qrcode-pretty","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fguilhermeasn%2Freact-qrcode-pretty/lists"}