Using qr-code: a customizable, animate-able HTML element

This QR code library internally uses the open source on the QR code pattern, colorize as you wish, and animate with five inbuilt animation presets.

Easy customization and extendability

<qr-code> is a minimal web component with better defaults, but it offers various attributes to customize QR code design according to your design preferences. You can customize positional pattern block colors, data bit element colors and styles, and animations.

This library also lets you build custom animations using a simple inbuilt animation API.

Easy frontend-library-independent integration

<qr-code> is not developed only for a specific frontend library — it’s a standard web component that natively works on any popular web browser. You can use this library to create animated, styled QR codes even on your plain HTML static website.

Every popular frontend library typically supports using web components within library-specific app components so that you can use <qr-code> in React, Angular, and Svelte-like popular frontend frameworks/libraries easily.

TypeScript support

This QR code creation library is developed with Stencil using TypeScript, so you don’t need to install TypeScript definitions separately from another npm module — TypeScript definitions come with the library source itself!

Using <qr-code> in webpages

You’re now familiar with this QR library’s features that can help you create stylish, animated QR codes in your web apps. Let’s see this QR code component in an HTML page to learn how to use it and customize it according to your design requirements.  

Setting up qr-code

You can install this library into your web development projects from the  

Note that we need to set the QR code component size by using the width CSS attribute for the parent <qr-code> element. We used 300px width for the QR code from the global style tag of the HTML document.

Customizing QR element colors

Every standard QR code typically has two types of atomic element types: position detection patterns and data bits. By default, this library fills every QR code element with black color, but it exposes three component attributes to customize colors as well.

The following code snippet renders a QR code element that has three different colors:

<qr-code 

  contents="https://example.com"

  module-color="#006fc4"

  position-ring-color="#026d9c"

  position-center-color="#023d57">

</qr-code>

The above HTML snippet uses custom colors for positional patterns and data bits as follows:  

Color customization attributes won’t work with classic square patterns.

Using colors won’t affect QR code accuracy, but make sure to use colors that highlight the QR code pattern elements from the background, otherwise the QR code scanner will fail to detect your QR code as a valid one.

Adding a logo to the middle

Modern QR codes also consist of branding elements like business logos. Remember the last time you used WhatsApp Web — it displays the app logo in the middle of the QR code. Based on the error correction level, we can put different logo sizes into the middle of the QR code. This library lets you place any graphical element in the middle of the QR code using the highest error correction level (H - 30 percent of data can be recovered).

Look at the following example:

<qr-code 

  contents="https://example.com"

  module-color="#a42c48"

  position-ring-color="#ffb32b"

  position-center-color="#8a293d">

  <img slot="icon" src="https://raw.githubusercontent.com/codezri/static-media/main/reshot-icon-haha.svg">

</qr-code>

The above code snippet places an SVG emoji as a logo (from

Here, we used the <img> tag to load an external SVG resource as a logo, but you can add any SVG graphic directly to the QR code element. All you need to do is to add slot="icon" to your vector logo element, and the library will handle the rest.

Look at another example that draws a custom shape using SVG tags without using the <img> tag:

<qr-code 

  contents="https://example.com"

  module-color="#a42c48"

  position-ring-color="#ffb32b"

  position-center-color="#8a293d">

  <svg slot="icon" viewBox="0 0 50 50">

    <circle r="18" cx="20" cy="25" fill="#ffb32b"/> 

    <circle r="18" cx="32" cy="25" fill="#8a293d"/>   

  </svg>

</qr-code>

Here's the result: . This web component automatically binds the animateQRCode() function into the parent QR code DOM element, so you can use it to add intro animations when the SVG is rendered:

<qr-code 

  id="qr"

  contents="https://example.com"

  module-color="#a42c48"

  position-ring-color="#ffb32b"

  position-center-color="#8a293d">

  <img slot="icon" src="https://raw.githubusercontent.com/codezri/static-media/main/reshot-icon-haha.svg">

</qr-code>



<script>

  document.getElementById('qr').addEventListener('codeRendered', () => {

    document.getElementById('qr').animateQRCode('MaterializeIn');

  });

</script>

The above code snippet renders the QR code by using the MaterializeIn animation preset as follows: of the library to see previews of these inbuilt animation presets.

You can also create a custom animation by using the library’s animation API:

.animateQRCode((targets, x, y, count, entity) => ({

  targets,

  duration: 800 + (x * y) + y * 2,

  easing: 'cubic-bezier(.51,1.62,.59,1)' ,

  web: { 

    opacity: [0, 0.7, 0.2, 1],

    transform: entity == 'module' ? ['skew(50deg)', 'skew(0deg)'] : [] 

  },

}))

The above code snippet plays a custom animation, as shown in the following preview: transformation functions.

Adding downloading and printing options

In most scenarios, developers use a QR code to send a scanable link to a mobile device. But, if your app generates a QR code for offline use, you may have to implement options to download and print generated QR codes. For example, a modern resource management web app may offer a QR code to download or print that users can paste on physical equipment instead of traditional barcodes.

We can use the following function to implement the QR code download action:

function downloadQR() {

  const svg = document.getElementById('qr')

                .shadowRoot.querySelector('svg').outerHTML;

  const blob = new Blob([svg.toString()]);

  const anc = document.createElement('a');

  anc.download = 'qr-code.svg';

  anc.href = window.URL.createObjectURL(blob);

  anc.click();

  anc.remove();

}

The above function extracts the SVG source from the web component. Then, it triggers the click event of a virtually generated hyperlink that points to the SVG Blob URL. Once you call the above function, the browser automatically downloads the generated QR code.

For printing your generated QR codes, you’ll have to use a workaround as web browsers don’t offer a standard way to print a targeted DOM element. Choose one option according to your development preference and requirements:

• Using a JavaScript DOM printing library like to adjust QR codes for printing

Let’s try one approach. We can use the following media query with the HTML document we used in this tutorial for demonstrations:

@media print {

  #qr { width: 100% }

}

The above CSS snippet enlarges the QR code element for printouts as follows: using the following command:

npx create-react-app qr-codes

cd qr-codes

Install the QR code library as follows:

npm install @bitjson/qr-code

# --- or ---

yarn add @bitjson/qr-code

Add the following CSS code to the index.css file to style the main app layout:

body {

  display: flex;

  justify-content: center;

  align-items: center;

  height: 100vh;

  margin: 0;

}

Import the QR code library from the App.js file as follows:

import * as qr from '@bitjson/qr-code';

Create a reusable, React component using the <qr-code> web component using the following code snippet:

const QRCode = (props) => {

  const ref = useRef(null);

  useEffect(() => {

    qr.defineCustomElements(window);



    if(ref.current) {

      ref.current.addEventListener('codeRendered', () => {

        ref.current.animateQRCode('MaterializeIn');

      });

    }



  }, []);

  return (<qr-code ref={ref} {...props}></qr-code>);

}

Finally, use the newly created QRCode React component from the App component to render an animated, stylish QR code as follows:

function App() {

  return (

    <QRCode 

      contents="https://example.com"

      module-color="#006fc4"

      position-ring-color="#026d9c"

      position-center-color="#023d57"

    />

  );

}

After making the above changes, start your app. Then, you’ll see the following QR code with an intro animation: , libraries. You can see how qr-code is a good option for generating animated, stylish QR codes for any web app:

Conclusion

In this tutorial, we learned how to use the qr-code library to create stylish, animated, SVG-based QR codes using plain HTML code and JavaScript. Also, we used the library in a new React app showing that we can create QR codes on any popular frontend framework/library.

Most QR code libraries generate QR codes on HTML canvas, so we can’t easily implement animations and make them responsive as vector graphics. Meanwhile, some QR code generation modules offer a solution only for a specific frontend framework/library, i.e., react-qr-code only for React.

Moreover, most QR code libraries don’t offer inbuilt animations and modern styles — they typically generate classic QRs with black squares without animations.

The qr-code library offers a frontend-library-agnostic minimal web component that helps you create stylish, animated, SVG-based QR codes. qr-code offers enough features to implement modern animated QR codes based on your design specifications, and that means we can say goodbye to classic, black square-based QR codes!

allows you to understand these errors in new and unique ways. Our frontend monitoring solution tracks user engagement with your JavaScript frontends to give you the ability to see exactly what the user did that led to an error.

.

Vollständiger Original-Bericht

Ausführliche Details, Code-Beispiele & Hersteller-Stellungnahme auf dev.to.

↗ Original-Artikel auf dev.to lesen