All Components

This website hosts Kendo UI wrappers of Kendo UI for jQuery widgets intended to be used in the React ecosystem.

Go to the native Kendo UI implementations for React

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