All Components

You are on the site of the Kendo UI Wrappers for React suite which contains wrappers for the Kendo UI for jQuery widgets. To explore the brand-new set of Kendo UI for React components which are built from the ground up, go to the Kendo UI for React suite.

QRCode Overview

QRCodes take a piece of information from a transitory media and help you generate Canvas and Scalable Vector Graphics (SVG) images.

These images represent QR (Quick Response) codes and can be quickly read by a cell phone. The QRCode renders all graphics on the client by using Canvas or SVG and supports different conventions for the values and a fallback to VML for older browsers.

The QRCode wrapper for React is a client-side wrapper for the Kendo UI QRCode widget.

Basic Usage

The following example demonstrates the QRCode in action.

class LayoutsContainer extends React.Component {

     render() {
       return (
           <div className={"row example-wrapper"}>
               <div className={"col-xs-12 col-md-6 example-col"}>
                   <QRCode value={"tel:+1-888-365-2779"} errorCorrection={"Q"} color={"#67a814"} size={120} />
               </div>
           </div>
       );
     }
   }

   ReactDOM.render(
     <LayoutsContainer />,
     document.querySelector('my-app')
   );

Features and Functionalities

Rendering Engine

By default, the QRCode renders images in an SVG format. To change the rendering engine and override the default behavior, use the renderAs property.

class LayoutsContainer extends React.Component {

     render() {
       return (
           <div className={"row example-wrapper"}>
               <div className={"col-xs-12 col-md-6 example-col"}>
                   <QRCode renderAs={"canvas"} value={"tel:+1-888-365-2779"} errorCorrection={"Q"} color={"#67a814"} size={120} />
               </div>
           </div>
       );
     }
   }

   ReactDOM.render(
     <LayoutsContainer />,
     document.querySelector('my-app')
   );

Borders

The QRCode enables you to define and display borders through the border property.

class LayoutsContainer extends React.Component {
       constructor(props) {
           super(props);
           this.border = {
               width: 2,
               dashType: "solid",
               color: "black"
           }
       }

     render() {
       return (
           <div className={"row example-wrapper"}>
               <div className={"col-xs-12 col-md-6 example-col"}>
                   <QRCode border={this.border} value={"tel:+1-888-365-2779"} errorCorrection={"Q"} color={"#67a814"} size={120}  />
               </div>
           </div>
       );
     }
   }

   ReactDOM.render(
     <LayoutsContainer />,
     document.querySelector('my-app')
   );
In this article