bitjson / qr-code Goto Github PK
View Code? Open in Web Editor NEWA no-framework, no-dependencies, customizable, animate-able, SVG-based <qr-code> HTML element.
Home Page: https://qr.bitjson.com/
License: MIT License
A no-framework, no-dependencies, customizable, animate-able, SVG-based <qr-code> HTML element.
Home Page: https://qr.bitjson.com/
License: MIT License
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.
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!
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>
<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.
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?
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.
With sample content as otpauth://totp/Example:[email protected]?secret=JBSWY3DPEHPK3PXP&issuer=Example
animation produces no more than 3 fps.
It is beautiful, but slowness ruins advantages.
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.
Hi,
Is it possible to add a feature that changes the QR Code at designated intervals?
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.