Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/educastellano/qr-code
Web Component for generating QR codes
https://github.com/educastellano/qr-code
customelements html javascript qr qr-code qrcode webcomponent
Last synced: 5 days ago
JSON representation
Web Component for generating QR codes
- Host: GitHub
- URL: https://github.com/educastellano/qr-code
- Owner: educastellano
- License: mit
- Created: 2013-09-18T09:59:26.000Z (about 11 years ago)
- Default Branch: gh-pages
- Last Pushed: 2023-07-12T17:28:48.000Z (over 1 year ago)
- Last Synced: 2024-11-30T16:12:02.431Z (12 days ago)
- Topics: customelements, html, javascript, qr, qr-code, qrcode, webcomponent
- Language: JavaScript
- Homepage:
- Size: 800 KB
- Stars: 515
- Watchers: 17
- Forks: 84
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- starred-awesome - qr-code - Web Component for generating QR codes (JavaScript)
README
[](https://www.webcomponents.org/element/webcomponent-qr-code)
# <qr-code>
Web Component for generating QR Codes, using (a [fork](https://github.com/educastellano/qr.js) of) [qr.js](https://github.com/lifthrasiir/qr.js) lib.
## Demo
> [Check it live](http://educastellano.github.io/qr-code/demo).
## Install
```sh
npm install webcomponent-qr-code
```
## Usage
```js
import 'webcomponent-qr-code'
```
```html
```
**Custom element name**
```js
import QRCode from 'webcomponent-qr-code/qr-code'
customElements.define('myapp-qrcode', QRCode)
```
```html
```
**Custom styles**
Use the `part` pseudo-element to style shadow DOM elements:
```css
/* format="png" */
qr-code::part(img) {}
/* format="html" */
qr-code::part(table) {}
/* format="svg" */
qr-code::part(svg) {}
```
## Options
Attribute | Options | Default | Description
--- | --- | --- | ---
`data` | *string* | `null` | The information encoded by the QR code.
`format` | `png`, `html`, `svg` | `png` | Format of the QR code rendered inside the component.
`modulesize` | *int* | `5` | Size of the modules in *pixels*.
`margin` | *int* | `4` | Margin of the QR code in *modules*.
`unit` | *string* | `px` | CSS units of the `modulesize` (**Supported for HTML generation only**)
`ratio` | *int* | `1` | Multiplier for the `modulesize`. Example: if `units` is `rem` and the `ratio` is `0.0625`, a modulesize of `5px` will be translated to `0.3125rem`. (**Supported for HTML generation only**)
## Contributing
1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D
## Changelog
* v1.2.0 July 12, 2023
* Support for any CSS unit in HTML generated codes.
* v1.1.0 November 15, 2022
* Support for custom styles with the `::part` CSS pseudo-element
* v1.0.0 July 13, 2018
* Use new API customElements.define
* Support for a custom element name
* Keep support for document.register() in /qr-code.es5.js
* v0.1.9 December 9, 2016
* Updated docs
* v0.1.7 April 11, 2015
* Support for SVG
* v0.1.6 April 10, 2015
* Default attributes
* qr.js removed and used as a dependency
* Available in NPM
* v0.1.1 March 31, 2015
* Framework-agnostic webcomponent (no use of Polymer)
* Available in Bower
* v0.0.1 September 18, 2013
* Started project using [boilerplate-element](https://github.com/customelements/boilerplate-element)
## License
[MIT License](http://opensource.org/licenses/MIT)