@cicciosgamino/qr-code-element
Advanced tools
QR-Code WebComponent based on Project Nayuki Qr Code Library
v0.1.0 - 22-02-2023
QR-Code WebComponent based on Project Nayuki Qr Code Library. Nayuki project aims to be the best, clearest library for generating QR Codes. Get more info at official page:
https://www.nayuki.io/page/qr-code-generator-library
Nayuki Qr Code Library v1.8.0 - Javascript
SVG SVG is the default graphic format the Qr Code is build-up in the <qr-code-element> . Define the size of the WebComponent with a CSS custom properties:
/* size the qr code if svg */
qr-code-element {
--size: 7rem;
}
Keep in mind that you can style the background and tile colors of the Qr Code with the attribute bkColor and tileColor as you can see in attributes table.
When the QrCode is render in SVG format the scale attribute can be use to set a ratio between the Qr Code dimension and the border.
Canvas Set the attribute graphic-element to canvas and the qr code will be render in a HTMLCanvasElement. The size of the canvas is managed mainly from the scale attribute, so try to change the scale attribute until you find the right size. When you have the scale you want to use you can adjust the pixel size of the qr code with the CSS applied to the <qr-code-element> , do NOT use only the CSS to get a big size of the qr code, penalty loss in graphic definition.
<qr-code-element
text="Hello World"
graphic-element="canvas"
scale="10"
error-correction="medium">
<qr-code-element>
qr-code-element {
--size: 11rem;
}
examples • usage • api • accessibility • TODO •
<qr-code-element
text="Hello World"
error-correction="medium">
</qr-code-element>
npm install --save @cicciosgamino/qr-code-element
<!-- Import Js Module -->
<script type="module">
// Importing this module registers <qr-code-element> as an HTMLElement
//
// Note this import is a bare module specifier, so it must be converted
// to a path using a server such as @web/dev-server or vite
import '@cicciosgamino/qr-code-element'
</script>
<qr-code-element
text="Hello World"
error-correction="medium"
mask-pattern="-1">
</qr-code-element>
import * from '@cicciosgamino/qr-code-element'
render () {
return html`
<qr-code-element
text="Hello World"
graphic-element="canvas"
error-correction="medium"
mask-pattern="-1">
</qr-code-element>
`
}
// plain html
document.querySelector('qr-code-element')
.setAttribute('text','@NEW TEXT >TO ENCODE!')
// in lit element
this.renderRoot.querySelector('qr-code-element')
.setAttribute('text','@HELLO >> New new World!')
| Name | Type | Default | Description |
|---|---|---|---|
| text | String | '@cicciosgamino' | The Unicode Text string to Encode |
| graphic-element | String | 'svg' | Render Qr Code in SVG or Canvas element [svg |
| scale | Number | 10 | Scale of Qr - Number greather than 1 |
| border | Number | 1 | Border of Qr - Number greather or equal to 0 |
| bk-color | String | #fff | Background Color |
| tile-color | String | #000 | Tile Color |
| error-correction | String | 'MEDIUM' | Error Correction level - LOW |
| Name | Description |
|---|---|
getStatistics() => {} | Get Statistics about the Qr Code generated |
No Events
| Name | Default | Description |
|---|---|---|
--size | 11rem | SIZExSIZE when graphic-element=svg |
--icon-size | 15% of --size | SIZExSIZE of centered icon |
Import the component's JavaScript module, use the component in your HTML, and control it with JavaScript, just like you would with a built-in element such as <button>:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My Example App</title>
<!-- Add support for Web Components to older browsers. -->
<script src="./node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
</head>
<body>
<!-- Use Web Components in your HTML like regular built-in elements. -->
<qr-code-element
error-correction="medium"
mask-pattern="-1">
</qr-code-element>
<!-- The Material Web Components use standard JavaScript modules. -->
<script type="module">
// Importing this module registers <progress-ring> as an element that you
// can use in this page.
//
// Note this import is a bare module specifier, so it must be converted
// to a path using a server such as @web/dev-server or vite.
import '@cicciosgamino/qr-code-element'
// Standard DOM APIs work with Web Components just like they do for
// built-in elements.
const qrCodeElement = document.querySelector('qr-code-element')
</script>
</body>
</html>
Serve your HTML with any server or build process that supports bare module specifier resolution (see next section):
# use globally instelled
npm install -g @web/dev-server
# install the project dev-dependencies and npm run
npm install
npm run dev
In this example will use the component with an input field, so you can insert the text you want to transform into the Qr Code.
<body>
<div class="text">
<input
id="qrtext"
type="text"
name="qrtext"
placeholder="text here ...">
<label for="qrtext">QrText</label>
</div>
<qr-code-element
error-correction="medium"
mask-pattern="-1">
</qr-code-element>
<noscript>
Please enable JavaScript to view this website.
</noscript>
<!-- Import Js Module from local file -->
<script type="module" src="../qr-code-element.js"></script>
<script>
window.addEventListener('DOMContentLoaded', (e) => {
const qrText = document.getElementById('qrtext')
qrText.addEventListener('input', (e) => {
const qrCodeElement = document.querySelector('qr-code-element')
qrCodeElement.setAttribute('text', event.target.value)
})
})
</script>
</body>
Check the examples folder if you need to copy some styles.
Got something interesting you'd like to share? Learn about contributing.
GNU General Public License v3.0
Made 🧑💻 by @cicciosgamino
[0.1.0] - 22-02-2023
- Fix SVG setting - now default graphic element is SVG
FAQs
QR-Code WebComponent based on Project Nayuki Qr Code Library
The npm package @cicciosgamino/qr-code-element receives a total of 2 weekly downloads. As such, @cicciosgamino/qr-code-element popularity was classified as not popular.
We found that @cicciosgamino/qr-code-element demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.
Security News
require(esm) backported to Node.js 20, easing the transition to ESM-only packages and reducing complexity for developers as Node 18 nears end-of-life.
Security News
PyPI now supports iOS and Android wheels, making it easier for Python developers to distribute mobile packages.