{"id":13422497,"url":"https://github.com/bitjson/qr-code","last_synced_at":"2025-05-15T08:10:59.500Z","repository":{"id":89891854,"uuid":"607068506","full_name":"bitjson/qr-code","owner":"bitjson","description":"A no-framework, no-dependencies, customizable, animate-able, SVG-based \u003cqr-code\u003e HTML element.","archived":false,"fork":false,"pushed_at":"2023-02-28T22:38:55.000Z","size":296,"stargazers_count":1343,"open_issues_count":13,"forks_count":75,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-05-14T23:16:09.313Z","etag":null,"topics":["animated","bch","bitcoin","bitcoin-cash","cryptocurrency","ethereum","qr-code","qr-code-component","qr-code-generator","qr-generator","stencil","svg","svg-animations","web-animations","web-component"],"latest_commit_sha":null,"homepage":"https://qr.bitjson.com/","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/bitjson.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}},"created_at":"2023-02-27T08:44:10.000Z","updated_at":"2025-05-13T01:40:14.000Z","dependencies_parsed_at":"2023-05-10T14:32:59.357Z","dependency_job_id":null,"html_url":"https://github.com/bitjson/qr-code","commit_stats":{"total_commits":21,"total_committers":1,"mean_commits":21.0,"dds":0.0,"last_synced_commit":"de60f23e80d5c7477a1d58512e32eb6751b85f88"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bitjson%2Fqr-code","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bitjson%2Fqr-code/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bitjson%2Fqr-code/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bitjson%2Fqr-code/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bitjson","download_url":"https://codeload.github.com/bitjson/qr-code/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254301432,"owners_count":22047904,"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":["animated","bch","bitcoin","bitcoin-cash","cryptocurrency","ethereum","qr-code","qr-code-component","qr-code-generator","qr-generator","stencil","svg","svg-animations","web-animations","web-component"],"created_at":"2024-07-30T23:00:46.218Z","updated_at":"2025-05-15T08:10:59.481Z","avatar_url":"https://github.com/bitjson.png","language":"TypeScript","readme":"[![npm](https://img.shields.io/npm/v/@bitjson/qr-code)](https://www.npmjs.com/package/@bitjson/qr-code)\n[![npm downloads](https://img.shields.io/npm/dm/@bitjson/qr-code)](https://www.npmjs.com/package/@bitjson/qr-code)\n[![Follow Bitjson on Twitter](https://img.shields.io/badge/follow-bitjson-1DA1F2?logo=twitter)](https://twitter.com/bitjson)\n[![GitHub stars](https://img.shields.io/github/stars/bitjson/qr-code.svg?style=social\u0026logo=github\u0026label=Stars)](https://github.com/bitjson/qr-code)\n\n# [`\u003cqr-code\u003e`](https://qr.bitjson.com/)\n\nA no-framework, no-dependencies, customizable, animate-able, SVG-based `\u003cqr-code\u003e` HTML element. It's just a single, self-contained [Web Component](https://developer.mozilla.org/en-US/docs/Web/Web_Components).\n\nhttps://user-images.githubusercontent.com/904007/221692053-1f4ab516-0f63-40e4-b1da-1922ba906963.mp4\n\n- [Announcement post](https://blog.bitjson.com/qr-code/) – usage guidance and background information\n- [Interactive demo](https://qr.bitjson.com/) – try the above demo in your browser\n\n# Usage\n\nImport `\u003cqr-code\u003e` using your build system or framework (e.g. `npm install @bitjson/qr-code`), or use the standalone script in your HTML `\u003chead\u003e` element:\n\n```html\n\u003cscript src=\"https://unpkg.com/@bitjson/qr-code@1.0.2/dist/qr-code.js\"\u003e\u003c/script\u003e\n```\n\nThen use the component anywhere in your HTML `\u003cbody\u003e` element:\n\n```html\n\u003cqr-code contents=\"https://bitjson.com\"\u003e\u003c/qr-code\u003e\n```\n\n## Full Example\n\nHere's an example in pure HTML using most features:\n\n```html\n\u003cqr-code\n  id=\"qr1\"\n  contents=\"https://bitjson.com/\"\n  module-color=\"#1c7d43\"\n  position-ring-color=\"#13532d\"\n  position-center-color=\"#70c559\"\n  mask-x-to-y-ratio=\"1.2\"\n  style=\"\n    width: 200px;\n    height: 200px;\n    margin: 2em auto;\n    background-color: #fff;\n  \"\n\u003e\n  \u003cimg src=\"assets/1.2-x-to-y-ratio-icon.svg\" slot=\"icon\" /\u003e\n\u003c/qr-code\u003e\n\n\u003cscript\u003e\n  document.getElementById('qr1').addEventListener('codeRendered', () =\u003e {\n    document.getElementById('qr1').animateQRCode('MaterializeIn');\n  });\n\u003c/script\u003e\n```\n\n## Animations\n\nAnimate in, animate on user interactions like URL hits or detected payments, and/or animate out when the QR code interaction is complete.\n\nSeveral preset animations are available, simply run them with the element's `animateQRCode` method:\n\n```js\ndocument.getElementById('qr1').animateQRCode('RadialRipple');\n```\n\nAvailable built-in presets:\n\n- `FadeInTopDown`\n- `FadeInCenterOut`\n- `MaterializeIn`\n- `RadialRipple`\n- `RadialRippleIn`\n\nYou can also design your own custom animations! Just pass a function to the `qr-code`'s `animateQRCode` method, e.g.:\n\n```js\ndocument\n  .getElementById('qr1')\n  .animateQRCode((targets, _x, _y, _count, entity) =\u003e ({\n    targets,\n    from: entity === 'module' ? Math.random() * 200 : 200,\n    duration: 500,\n    easing: 'cubic-bezier(.5,0,1,1)',\n    web: { opacity: [1, 0], scale: [1, 1.1, 0.5] },\n  }));\n```\n\nThe [built-in presets use this API internally](src/components/qr-code/animations.ts), so review those for guidance and inspiration. Pull request for new presets are welcome!\n\n## Animation Previewer\n\nThe **animation previewer makes fine-tuning animations much easier**: try it by cloning this repo and running the live-reloading package script:\n\n```\ngit clone https://github.com/bitjson/qr-code.git\ncd qr-code\nnpm ci\nnpm start\n```\n\nThen work on your animation in `src/index.html` using the animation previewer (at the bottom right of the window) to test the last-run animation at various speeds, scrub through it manually, or play it in reverse.\n\n## Production build\n\nDisable the `just-animate` player in [`src/components/qr-code/qr-code.tsx`](src/components/qr-code/qr-code.tsx), then build:\n\n```bash\nnpm run build\n```\n\nYou can test the built component by pointing the script in [`index.html`](index.html) to `dist/qr-code.js` and opening the page via the local filesystem.\n","funding_links":[],"categories":["Utilities","TypeScript","DevTools","Real World","Libraries \u0026 SDKs","Awesome Bitcoin Cash [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","Libraries","Components built with Stencil"],"sub_categories":["Miscellaneous","Languages","Components","Typescript","Projects","Applications","Community"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbitjson%2Fqr-code","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbitjson%2Fqr-code","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbitjson%2Fqr-code/lists"}