bitjson / qr-code Goto Github PK

View Code? Open in Web Editor NEW

1.0K 9.0 50.0 296 KB

A no-framework, no-dependencies, customizable, animate-able, SVG-based <qr-code> HTML element.

Home Page: https://qr.bitjson.com/

License: MIT License

TypeScript 56.57% CSS 0.70% HTML 42.24% JavaScript 0.50%

bch bitcoin bitcoin-cash cryptocurrency ethereum qr-code qr-code-component qr-code-generator qr-generator web-component

qr-code's Introduction

`<qr-code>`

A no-framework, no-dependencies, customizable, animate-able, SVG-based <qr-code> HTML element. It's just a single, self-contained Web Component.

bitjson-qr-code-demo.mp4

Announcement post – usage guidance and background information
Interactive demo – try the above demo in your browser

Usage

Import <qr-code> using your build system or framework (e.g. npm install @bitjson/qr-code), or use the standalone script in your HTML <head> element:

<script src="https://unpkg.com/@bitjson/[email protected]/dist/qr-code.js"></script>

Then use the component anywhere in your HTML <body> element:

<qr-code contents="https://bitjson.com"></qr-code>

Full Example

Here's an example in pure HTML using most features:

<qr-code
  id="qr1"
  contents="https://bitjson.com/"
  module-color="#1c7d43"
  position-ring-color="#13532d"
  position-center-color="#70c559"
  mask-x-to-y-ratio="1.2"
  style="
    width: 200px;
    height: 200px;
    margin: 2em auto;
    background-color: #fff;
  "
>
  <img src="assets/1.2-x-to-y-ratio-icon.svg" slot="icon" />
</qr-code>

<script>
  document.getElementById('qr1').addEventListener('codeRendered', () => {
    document.getElementById('qr1').animateQRCode('MaterializeIn');
  });
</script>

Animations

Animate in, animate on user interactions like URL hits or detected payments, and/or animate out when the QR code interaction is complete.

Several preset animations are available, simply run them with the element's animateQRCode method:

document.getElementById('qr1').animateQRCode('RadialRipple');

Available built-in presets:

FadeInTopDown
FadeInCenterOut
MaterializeIn
RadialRipple
RadialRippleIn

You can also design your own custom animations! Just pass a function to the qr-code's animateQRCode method, e.g.:

document
  .getElementById('qr1')
  .animateQRCode((targets, _x, _y, _count, entity) => ({
    targets,
    from: entity === 'module' ? Math.random() * 200 : 200,
    duration: 500,
    easing: 'cubic-bezier(.5,0,1,1)',
    web: { opacity: [1, 0], scale: [1, 1.1, 0.5] },
  }));

The built-in presets use this API internally, so review those for guidance and inspiration. Pull request for new presets are welcome!

Animation Previewer

The animation previewer makes fine-tuning animations much easier: try it by cloning this repo and running the live-reloading package script:

git clone https://github.com/bitjson/qr-code.git
cd qr-code
npm ci
npm start

Then 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.

Production build

Disable the just-animate player in src/components/qr-code/qr-code.tsx, then build:

npm run build

You can test the built component by pointing the script in index.html to dist/qr-code.js and opening the page via the local filesystem.

qr-code's People

Contributors

Stargazers

Watchers

Forkers

suryatmodulus rogueyoshi irifly christroutner alejandrosuarez jimtendo nanderoo jamesjreynolds tlourenzo cloudnepal ssahgal timelery damien-jang johnathanwhite gorilik324 alial-timimi pageboy-za x5tr ssemiya goofwear networksystemone shaban00 fortihub ericaimhigh1 0xgoerlimainnet kenvindev johnjx wundero valtu4a mm86133 sarnzzle mkfinterests nagarajan ranbeioc fujohnwang tauheedkhan gchacko zhangyuhan2016 michaelycy mz0in rifatdover davgit axemafr itwebmaster hiddenvs thebrandonlucas erhyfspubf dedicatedcloud devdevdany

qr-code's Issues

Glitchy QR Rendering when animation ends

Screen.Recording.2024-03-05.at.10.12.44.AM.mov

We ran into this issue and I noticed you can even see it on the demo site. It's not super rare to see the behavior in the video above where the animation performs nicely but then suddenly gets all messed up a moment after the animation ends. It seems to be most common with RadialRippleIn from what I can tell. The simpler animations can experience it too but it's rarer and much more subtle when it happens.

This is in Chrome.

Suggestion: QR Code Changes at Designated Interval

Hi,
Is it possible to add a feature that changes the QR Code at designated intervals?

How to export/save result?

Sorry maybe I am missing something but there is no documentation on any method to get the result to save to storage, like Canvas/SVG/PNG. Is this supported?

unsafe-eval issue

Hi I'm facing an unsafe-eval issue from my project's CSP rules when installing via npm.

Is there any advice on how to get around this?

Some necessary Types are missing from QrCodeAttributes

When using the qr-code element with Typescript in React, I'm getting the error Property 'children' does not exist on type 'QrCodeAttributes'.ts(2322). The child is the img element I've put as an icon.

I also get this error for 'style' and 'className', at least one of which is needed to style it!

If I manually add these properties to the QrCodeAttributes Interface in the Node Modules, it builds without problem, but this only works for development. I've currently just ignored the TS errors to get it to build.

Allow to change "roundness" of QR code parts individually

Hi, first of great work, I looked through the source code and I think this project is really nicely done!

I was wondering if you might be open to extend the functionality of this package a bit to allow additional configurations. For I already have done the changes locally, just wondering if you are interested in such a thing.

My proposal looks like this:

<qr-code
  contents="bitcoincash:?r=https://bitjson.com/example-url"
  module-color="#1c7d43"
  position-ring-color="#13532d"
  position-center-color="#70C559"
  module-roundness="1"
  position-ring-roundness="1"
  position-center-roundness="1"
>
  <img src="assets/bch.svg" slot="icon" />
</qr-code>

All roundness settings set to 0.5:

All roundness settings set to 0:

I would also want to expose the errorCorrectionLevel and typeNumber. My last proposal is that maybe squares is not the best naming anymore with those changes and maybe it should be called raw?

Let me know if you have any interest in those changes then I will create a PR!

Problem via `NPM install ` setup

installing this package using npm install @bitjson/qr-code and importing this way don't worked:

<script src="/node_modules/@bitjson/qr-code/dist/qr-code.js"></script>
<script src="/node_modules/@bitjson/qr-code/dist/qr-code/qr-code.orxjfzvr.js" type="module" crossorigin="true" data-resources-url="/node_modules/@bitjson/qr-code/dist/qr-code/" data-namespace="qr-code"></script>

Or even importing this way:

<script src="/node_modules/@bitjson/qr-code/dist/qr-code.js"></script>

I personally don't want to use CDN because I want to load the script from local storage.

I have the feeling that the package installed during npm install is not updated. Please help me on this.

Programmatic rendering

I'm using React and the library doesn't seem to recognize elements generated on the fly. Is there a programmatic way to generate a QR code?

Vaadin integration

Hi,
I am unable to integrate the component into Vaadin.
Perhaps because of the way the /dist/qr-code.js tries to load the other scripts.

Is it not possible to get a single file to load? It would simplify the integration a lot.
Thank you.