Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bitjson/qr-code
A no-framework, no-dependencies, customizable, animate-able, SVG-based <qr-code> HTML element.
https://github.com/bitjson/qr-code
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
Last synced: about 1 month ago
JSON representation
A no-framework, no-dependencies, customizable, animate-able, SVG-based <qr-code> HTML element.
- Host: GitHub
- URL: https://github.com/bitjson/qr-code
- Owner: bitjson
- License: mit
- Created: 2023-02-27T08:44:10.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2023-02-28T22:38:55.000Z (over 1 year ago)
- Last Synced: 2024-07-22T20:41:54.462Z (about 2 months ago)
- 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
- Language: TypeScript
- Homepage: https://qr.bitjson.com/
- Size: 289 KB
- Stars: 1,166
- Watchers: 9
- Forks: 58
- Open Issues: 11
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
- awesome-bitcoin - `<qr-code>` - framework, no-dependencies, customizable, animate-able, SVG-based `<qr-code>` web component. (Utilities)
- awesome-bitcoin-sv - `<qr-code>` - framework, no-dependencies, customizable, animate-able, SVG-based `<qr-code>` HTML element. (Libraries / Applications)
- awesome-react-components - `<qr-code>` - dependencies, customizable, animate-able, SVG-based `<qr-code>` element. (Utilities / Miscellaneous)
- fucking-awesome-react-components - `<qr-code>` - dependencies, customizable, animate-able, SVG-based `<qr-code>` element. (Utilities / Miscellaneous)
- awesome-web-components - `<qr-code>` - able, SVG-based QR codes. (Real World / Components)
- my-awesome-list - qr-code - framework, no-dependencies, customizable, animate-able, SVG-based &lt;qr-code&gt; HTML element. | bitjson | 1232 | (TypeScript)
README
[](https://www.npmjs.com/package/@bitjson/qr-code)
[](https://www.npmjs.com/package/@bitjson/qr-code)
[](https://twitter.com/bitjson)
[](https://github.com/bitjson/qr-code)
# [``](https://qr.bitjson.com/)
A no-framework, no-dependencies, customizable, animate-able, SVG-based `` HTML element. It's just a single, self-contained [Web Component](https://developer.mozilla.org/en-US/docs/Web/Web_Components).
https://user-images.githubusercontent.com/904007/221692053-1f4ab516-0f63-40e4-b1da-1922ba906963.mp4
- [Announcement post](https://blog.bitjson.com/qr-code/) – usage guidance and background information
- [Interactive demo](https://qr.bitjson.com/) – try the above demo in your browser
# Usage
Import `` using your build system or framework (e.g. `npm install @bitjson/qr-code`), or use the standalone script in your HTML `` element:
```html
```
Then use the component anywhere in your HTML `` element:
```html
```
## Full Example
Here's an example in pure HTML using most features:
```html
document.getElementById('qr1').addEventListener('codeRendered', () => {
document.getElementById('qr1').animateQRCode('MaterializeIn');
});
```
## 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:
```js
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.:
```js
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](src/components/qr-code/animations.ts), 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`](src/components/qr-code/qr-code.tsx), then build:
```bash
npm run build
```
You 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.