Ark Logo
Reat
Components
Qr code

QR Code

A component that generates a QR code based on the provided data.

Anatomy

To set up the QR code correctly, you'll need to understand its anatomy and how we name its parts.

Each part includes a data-part attribute to help identify them in the DOM.

Examples

Learn how to use the QR Code component in your project. Let's take a look at the most basic example:

With Overlay

You can also add a logo or overlay to the QR code. This is useful when you want to brand the QR code.

Error Correction

In cases where the link is too long or the logo overlay covers a significant area, the error correction level can be increased.

Use the encoding.ecc or encoding.boostEcc property to set the error correction level:

  • L: Allows recovery of up to 7% data loss (default)
  • M: Allows recovery of up to 15% data loss
  • Q: Allows recovery of up to 25% data loss
  • H: Allows recovery of up to 30% data loss

API Reference