Learn how to create a QR code for your React app with ease using KendoReact.
QR codes (i.e., quick-response codes) are two-dimensional barcodes that can store data such as URLs, text or contact details. They are easily scanned using a smartphone or QR code reader, enabling instant access to the embedded information. From sharing URLs to embedding contact details, they provide a simple yet powerful way to bridge the physical and digital worlds.
In this article, we’ll explore how we can create, customize and leverage QR codes in our React applications with the Progress KendoReact library.
The KendoReact QR Code component simplifies the process of generating QR codes and is part of the KendoReact Barcodes library. It supports configurable properties like size, colors, error correction levels and overlays, making it adaptable to various use cases.
This React QRCode component is distributed through the @progress/kendo-react-barcodes npm package and can be imported directly from this package.
import { QRCode } from "@progress/kendo-react-barcodes";
The QRCode component can be imported and used as follows:
import * as React from "react";
import { QRCode } from "@progress/kendo-react-barcodes";
const App = () => (
<QRCode value="https://www.telerik.com/kendo-react-ui/components/barcodes/qrcode" />
);
export default App;
The above example will render a basic QR code for the specified URL. By default, the QR code will have a default size (150px by 150px) and standard error correction settings.
Scanning this QR code with a smartphone or QR code reader will take users directly to the provided URL.
The <QRCode />
component allows us to define its size using the size
property and tailor it to our application’s layout needs.
<QRCode
value="https://www.telerik.com/kendo-react-ui/components/barcodes/qrcode"
size={600}
/>
In this example, a QR code with a size of 600px by 600px is generated.
We can personalize a QR code’s foreground and background colors using the color
and background
props:
<QRCode
value="https://www.telerik.com/kendo-react-ui/components/barcodes/qrcode"
color="#166a83"
background="#f0f0f0"
/>
This changes the primary color of the QR code to teal and its background to light gray for better contrast.
Borders can be added using the border
property:
<QRCode
value="https://www.telerik.com/kendo-react-ui/components/barcodes/qrcode"
border={{ width: 5, color: "#e15613" }}
/>
This example adds a 5px-wide orange border around the QR code.
Encoding refers to the method used to convert information (e.g., text or URLs) into a QR code. It determines how the data is represented and enables compatibility with the intended QR code readers. Combined with error correction, which enables QR codes to remain scannable even if partially damaged, these features help with reliable and versatile QR code performance. Different error correction levels dictate how much data can be restored, making it possible to balance resilience against potential damage and the amount of data the QR code can store.
The KendoReact QRCode component supports various encoding formats and error correction levels. We can adjust these settings using the encoding
and errorCorrection
props:
<QRCode value="https://www.example.com/ 你好世界🌟" encoding="UTF_8" errorCorrection="H" />
In this example, UTF-8
encoding is used for extended character support and error correction level "H"
grants up to 30% data recovery in case of damage. The <QRCode />
component supports the following error correction levels:
Image overlays can make QR codes visually appealing while maintaining readability, thanks to error correction. The QRCode component supports adding an image overlay and setting its dimensions and location using the overlay
prop.
<QRCode
value="https://www.telerik.com/kendo-react-ui/components/barcodes/qrcode"
// image overlay
overlay={{
type: "image",
imageUrl:
"https://d585tldpucybw.cloudfront.net/sfimages/default-source/svg/kendo-react-ninja.svg",
width: 100,
height: 100,
}}
encoding="UTF_8"
errorCorrection="H"
color="#166a83"
background="#ffffff"
size={300}
/>
This example adds the KendoReact Ninja mascot as an overlay.
Swiss QR codes are specialized types of QR codes designed for payment purposes, particularly for billing and invoicing in Switzerland. They streamline payment processes by embedding all necessary details, such as IBAN, payment reference and amount, in a scannable format.
The KendoReact QRCode component supports the creation of a Swiss QR code by setting the overlay
prop to type: 'swiss'
. This allows the QR code to adhere to the specific format required for Swiss payments.
import * as React from "react";
import { QRCode } from "@progress/kendo-react-barcodes";
const receipt = `SPC
0200
1
CH4431999123000889012
S
Robert Schneider AG
Rue du Lac
1268
2501
Biel
CH
1949.75
CHF
S
Pia-Maria Rutschmann-Schnyder
Grosse Marktgasse
28
9400
Rorschach
CH
QRR
210000000003139471430009017
Instruction of 03.04.2019
EPD
//S1/10/10201409/11/190512/20/1400.000-53/30/106017086/31/180508/32/7.7/40/2:10;0:30
Name AV1: UV;UltraPay005;12345
Name AV2: XY;XYService;54321`;
const App = () => (
<QRCode
value={receipt}
overlay={{
type: "swiss",
}}
errorCorrection="Q"
size={300}
/>
);
export default App;
This generates a Swiss QR code with payment details for the specified receipt.
The KendoReact QR Code component is an intuitive tool for integrating QR codes into React applications. With features like customizable size, color, overlays and error correction, it simplifies creating professional-grade QR codes tailored to your application’s needs.
Don’t forget: KendoReact comes with a free 30-day trial.
Hassan is a senior frontend engineer and has helped build large production applications at-scale at organizations like Doordash, Instacart and Shopify. Hassan is also a published author and course instructor where he’s helped thousands of students learn in-depth frontend engineering skills like React, Vue, TypeScript, and GraphQL.